圣杯双飞翼

两栏。圣杯，双飞翼布局
两栏布局

左边浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素影响
三栏布局

圣杯布局和双飞翼布局两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
圣杯布局来源于文章In Search of the Holy Grail，
而双飞翼布局来源于淘宝UED。
虽然两者的实现方法略有差异，
不过都遵循了以下要点：
 
* 两侧宽度固定，中间宽度自适应
* 中间部分在DOM结构上优先，以便先行渲染
* 允许三列中的任意一列成为最高列
* 只需要使用一个额外的<div >外层 标签
圣杯布局

1 主体部分是由主体container包裹的center,left,right三列，其中center定义在最前面

2 主体设置 padding-left: 200px; padding-right: 150px; 为左右两列预留出相应的空间

3 随后分别为三列设置宽度与浮动，同时对footer设置清除浮动

4 使用负外边距，将left放置到之前预留出的位置上

5 使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置

6 右侧同样

优点：
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载

双飞翼布局

1 双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

2 将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间

3 将right通过margin-left放置到预留位置

4 左侧同样

总结

圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构

而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小