双飞翼布局和圣杯布局

双飞翼布局源自淘宝UED，圣杯布局来自2006年 Matthew Levine 的一篇文章，目的都是为了实现三列布局（中间列自适应宽度，两边分别固定宽度），并且中间列优先加载。两种布局的原理可以应用到两列布局中。

开始之前说一个翻译问题，圣杯布局作者提到发明圣杯布局前的其中一个需求：allow any column to be the tallest
这里应该翻译为：允许任意列高度是最高的，而不是“允许任意列（在 HTML 中位置）在最高”。

相同点：

都让三列布局左浮动
实现三列布局
中间列优先加载
左右两列顺序不影响布局

异同点：

圣杯布局利用布局父元素 container 左右 padding 出边距给予左右两列的空间放置，左右两列则通过 position 和margin 负边距插入到自身的位置。
双飞翼布局直接在 container 加入一个 div 包裹住中间列，同时该 div 浮动，而被包裹住的中间列则 margin 左右为左右两列布局留出空白，这样做省了多个 CSS 属性（position，左右两列的 margin 负边距，container 的 padding 属性，左右两列的 left 或 right 属性），但是双飞翼则多了一个 div 标签。
圣杯布局在 IE 6/7 下需要加入 hack 解决一个布局问题，双飞翼布局则不用。

在我看来我更喜欢双飞翼布局，用一个 div 标签换来减少多个属性和一个 hack 属性（在 IE 6/7 下圣杯布局需要加入 hack，但是如果 container 触发了 BFC 则该 hack 不用加入，例如 container 使用了 clearfix 或 overflow: hidden）。圣杯布局下需要加入的 hack 是左边的列的 left 属性必须是右边列的宽度的值，在正常浏览器布局下 left 属性的值则是自身的宽度的负值，这里提一个现象，在实现圣杯布局的时候我使用了 clearfix 闭合浮动而不是圣杯布局来源文章中的使用 footer 来清除浮动，导致在 IE 6/7 下会出现的异常布局消失了，我估计是触发了 BFC 的原因（我把 clearfix 去掉后使用了 overflow: hidden 出现同样的效果）。

1.双飞翼布局

演示地址：http://www.libinhong.com/demo/Flying

CSS：

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Microsoft YaHei;
}
.fl {
    float: left;
    height: 300px;
}
.container-center {
    width: 100%;
}
.container-center .center {
    margin: 0 200px;
    height: 100%;
    background-color: rgb(143, 221, 172);
}
.container .left {
    width: 200px;
    margin-left: -100%;
    background: rgb(205, 228, 128);
}
.container .right {
    width: 200px;
    margin-left: -200px;
    background-color: rgb(94, 152, 185);
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

HTML：

<div class="container clearfix">
    <div class="container-center fl">
        <div class="center">中间自适应</div>
    </div>
    <div class="left fl">左边固定200px</div>
    <div class="right fl">右边固定200px</div>
</div>

2.圣杯布局

演示地址：http://www.libinhong.com/demo/HolyGrails

CSS：

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Microsoft YaHei;
}
.fl {
    float: left;
    height: 300px;
    position: relative;
}
.container {
    padding: 0 200px 0 150px;
}
.container .center {
    width: 100%;
    background-color: rgb(166, 212, 121);
}
.container .left {
    width: 150px;
    margin-left: -100%;
    left: -150px;
    /**left: 200px;*/  /** for IE6/7*/*/
    background-color: rgb(136, 204, 194);
}
.container .right {
    width: 200px;
    margin-right: -200px;
    background-color: rgb(228, 215, 92);
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

HTML：

<div class="container clearfix">
    <div class="center fl">中间自适应</div>
    <div class="left fl">左边固定150px</div>
    <div class="right fl">右边固定200px</div>
</div>

演示效果：

演示效果

2016-03-18