上一次我们已经说完了圣杯布局，这次来说说双飞翼布局吧。
首先，先给上全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼布局</title> <style> * { padding: 0; margin: 0; } header, footer { text-align: center; width: 100%; background-color: #bbbbbb; } .text { text-align: center; line-height: 200px; font-size: 40px; color: #fff; } .bd { overflow: hidden; } .main { float: left; width: 100%; height: 200px; background-color: #ddd; } .main-content { margin: 0 200px; } .left { float: left; width: 200px; height: 200px; background-color: #da4242; /* 产生布局效果的属性 */ margin-left: -100%; } .right { float: left; width: 200px; height: 200px; background-color: #4ddef1; /* 产生布局效果的属性 */ margin-left: -200px; } </style> </head> <body> <header>双飞翼布局</header> <div class="bd"> <div class="main text"> <div class="main-content">main</div> </div> <div class="left text"> left </div> <div class="right text"> right </div> </div> <footer style:"clear：both">footer</footer> </body> </html>
上述代码与圣杯布局相比HTML的结构不一样，在中间栏多了一个内容栏，根据盒子模型，我们就不能在main栏设置margin，因为之前设置了width：100%，若再设置margin会
超过所设宽度，我们用内容栏存放内容，并设置margin。
逐步解析
双飞翼布局与圣杯布局前几步是一样的,
1.给中间栏main设置width：100%，让它始终占满窗口，这样才有自适应的效果。设置背景颜色
2.给左右两个栏固定width和height。设置背景颜色
效果如下：
3.给三个栏设置左浮动；float：left（注意清除浮动，因为浮动会导致父元素高度塌陷）
4.这里开始是重头戏了，我们使用到强大的负外边距了，我们先处理左栏，因为中间栏的宽度为100%，所以左栏被挤到下面去了。现在left要到最左边的位置，所以我们在left的样式下输入：margin-left：-100%；
5.同理，接下来让right到main的右边，只需要设置margin-left的值为负的right的宽，使main重叠right的宽度，因为设置了浮动所以right就会到main的右边。
6.中间内容栏设置 margin: 0 200px;
至此我们的双飞翼布局就已经实现了
在此说说圣杯布局与双飞翼布局的区别吧：
相同点：
1.两个都是三栏式布局，中间栏优先放，保证优先渲染
2.实现方式都是左浮动
不同点：
1圣杯布局是中间栏为两边腾开位置。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置