双飞翼布局是一种经典的网页布局方式，它主要用于解决三栏布局中中间栏内容优先加载和显示的问题。以下是四种使用 CSS 实现双飞翼布局的方法：
方法一：使用定位（Position） 这种方法依赖于绝对定位和相对定位来实现。但需要注意的是，使用定位可能会影响页面布局的流动性和可读性。 <div class=“container”><div class=“left”>左侧栏</div>
<div class=“main”><div class="main-content">中间栏</div></div>
<div class=“right”>右侧栏</div>
</div>.container {
position: relative;
width: 100%;
}.left {
position: absolute;
left: 0;
width: 200px;
background: #f00;
}.main {
margin: 0 220px; /* 留出左右栏的宽度 */
background: #0f0;
}.main-content {
margin: 0 220px; /* 留出左右栏的宽度 */
}.right {
position: absolute;
right: 0;
width: 200px;
background: #00f;
}方法二：使用浮动（Float）和负边距（Negative Margin） 双飞翼布局的名字就来源于这种方法，其中间栏使用负边距来“飞”到左右两栏的上方。.container {<div class=“container”>
<div class=“main”><div class="main-content">中间栏</div></div>
<div class=“left”>左侧栏</div>
<div class=“right”>右侧栏</div>
</div>
width: 100%;
overflow: hidden; /* 清除浮动影响 */
}.main {
float: left;
width: 100%;
}.main-content {
margin: 0 220px; /* 留出左右栏的宽度 */
}.left, .right {
float: left;
width: 200px;
height: 100%;
position: relative;
}.left {
margin-left: -100%; /* 移到左侧 /
left: -200px; / 定位到最左侧 */
background: #f00;
}.right {
margin-left: -200px; /* 移到中间栏的右侧 /
right: -200px; / 定位到最右侧 */
background: #00f;
} 方法三：使用 Flexbox Flexbox 是一个现代的布局模块，能够轻松处理各种复杂的布局。<div class=“container”>
<div class=“left”>左侧栏</div>
<div class=“main”>中间栏</div>
<div class=“right”>右侧栏</div>
</div>.container {
display: flex;
}.left {
width: 200px;
background: #f00;
}.main {
flex: 1; /* 占据剩余空间 */
background: #0f0;
}.right {
width: 200px;
background: #00f;
} 方法四：使用 Grid CSS Grid 是一个强大的二维布局系统，适用于复杂的网页布局。<div class=“container”>
<div class=“left”>左侧栏</div>
<div class=“main”>中间栏</div>
<div class=“right”>右侧栏</div>
</div>.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}.left {
background: #f00;
}.main {
background: #0f0;
}.right {
background: #00f;
}