圣杯布局与双飞翼布局
- 圣杯布局与双飞翼布局，都是属于三列布局的经典布局。
- 圣杯布局是歪果仁发明的；
- 双飞翼布局是圣杯布局的优化版，由淘宝UED提出；
- 它们的效果图类似，但是实现方法不同。
以下是效果图：
实现步骤：
1、先把 HTML 结构写好。
<div class="header">头部</div> <div class="main"></div> <div class="footer">底部</div>
2、写一下上面结构的基本样式。
.header { height: 40px; background: lightblue; } .footer { height: 100px; background: lightcoral; }
3、布局正式开始，现在往 main 元素里边加东西。
<div class="main"> <div class="center">中间自适应</div> <!-- 因为相对来说，center中为主要内容，所以写前边，这样也有利于SEO --> <div class="left">左列定宽</div> <div class="right">右列定宽</div> </div>
4、定义一下 center、left、right 的基本样式。
.center { width: 100%; height: 500px; background: lightgray; } .left { width: 200px; height: 500px; background: lightpink; } .right { width: 300px; height: 500px; background: lightgreen; }
注意：到这一步的时候，请在浏览器查看效果。
出现以上效果是因为： center、left、right 处于文档流中，而块元素又独占一行。
5、现在我们让 center、left、right 浮动起来，分别加上以下代码。
.center { float: left; } .left { float: left; } .right { float: left; }
现在 center、left、right 都浮动起来了，但是因为 center 的 width 为 100%，center 仍然会占满一行，所以 left 和 right 只能浮在 center 下面。
注意：我们没有给 main 设置高度，它的高度本来是由里边的子元素（center、left、right） 撑起来的。但是现在子元素都设置了浮动，脱离了文档流，所以 main 的高度又变成了0，所以 footer 元素会往上跑，被浮动元素盖住。
6、使用 clearfix 清除浮动，让 footer 回到原来的位置。
HTML代码： <div class="main clearfix"> // 给 main 加上 clearfix 类 ...... </div> CSS代码： .clearfix::after { content: ""; display: block; clear: both; }
7、给 left 和 right加以下代码，让 left 和 right 与 center 在同一行显示。
.left { margin-left: -100%; } .right { margin-left: -300px; }
现在可以看到，“中间自适应”几个字不见了，这是因为 left 和 right 已经盖在了 center 上边。如果 center 中有更多内容，依然将无法显示。
为了解决上述出现的问题，圣杯布局与双飞翼布局采用了不同的方法。
圣杯布局：
1、给三列的父元素（main）， 加上 左margin 和 右margin（也有人使用 padding），将三列挤到中间来，这样左边和右边就会预留出位置。
.main { margin-left: 200px; margin-right: 300px; }
2、给 left 和 right 设置相对定位，将它们移动到相应的位置。
.left { position: relative; left: -200px; } .right { position: relative; right: -300px; }
至此，圣杯布局完成。
可以放大缩小浏览器窗口，查看效果，看看 center 是否为自适应。
现在回到上面第7步，将问题重现。
双飞翼布局：
1、给 center 加一个子元素 inner。
<div class="center"> <div class="inner">中间自适应</div> </div>
2、给 inner 设置 左margin 和 右 margin，将 inner 挤到中间显示。
[代码片段](https://code.juejin.cn/pen/7130464938136436766)[代码片段](https://code.juejin.cn/pen/7130464938136436766)
至此，双飞翼布局完成。
可以放大缩小浏览器窗口，查看效果，看看 center 是否为自适应。
如有不当之处，欢迎指出~~~
