在CSS布局中，最常见的是三列布局。尤其是左右宽度固定，中间自适 应，因此出现了圣杯布局与双飞翼布局。
抛开专有名词，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
双飞翼布局
顾名思义，如果把三栏布局比作一只鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。（圣杯同理）
先上代码
header
这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分
left
right
效果图
效果图 1
几点重要说明
1. 三栏全部浮动；
2. 为什么中间自适应部分在结构中要放在最前面？
这是“合理的页面顺序”，所谓的“合理的页面结构顺序”，就是将主要的内容摆在HTML结构中的前面，优先渲染，但显示的位置并不一定是在前面。
3. margin-left:-100% 是什么意思？
由于中间部分宽度自适应，所以会占据整个父元素的宽度，从而把左右部分挤下来。那么就要想办法让三列在一行：
左部分设置margin-left:-100%（100%是父元素的宽度），此时左边框会和父元素的左边框重合。
右部分设置:margin-left:-(右部分宽度); 此时，右部分的右边框与父元素的右边框重合;
未设置浮动
效果图 2
设置浮动及左右两部分设置marign-left
效果图 3
4. 中间栏如何设置？
由于中间宽度是整个父元素宽度，所以左右部分上去后会遮挡部分中间栏，如上图3。此时要把左右部分“ 推开 ”，中间栏设置padding或margin均可。
中间栏设置margin后
效果图 4
圣杯布局
和双飞翼布局大同小异，区别在于对遮挡中间栏的处理方式：圣杯为父元素设置padding,然后相对定位把左右两部分拉回原位；双飞翼则是直接对中间部分设置margin,把左右两部分拉回原位。
注意：是相对定位，不是绝对定位。
代码（只放不同的代码）
.wrap {
padding: 0 200px 0 120px;
background: #ccc;
}
.main {
background: green;
color: #fff;
/* margin: 0 200px 0 120px; */
}
.left {
position: relative;
top: 0;
left: -120px;
width: 120px;
background: yellow;
margin-left: -100%;
}
.right {
position: relative;
top: 0;
right: -200px;
width: 200px;
background: orange;
margin-left: -200px;
}
未设置相对定位时
效果图 5
设置相对定位时
效果图 6
总结：
其实关于三栏布局的方法有很多，圣杯和双飞翼只是提到的比较多，也有更简单的方法（比如浮动），希望大家能合理选择。谢谢阅读。