圣杯布局和双飞翼布局的原理

圣杯布局

1. 三个部分必须都设置向左浮动。
2. 先写 middle，让页面先渲染中间的重要区域。
3. content 设置左右内边距是为了给 left 和 right 留出空间。
4. middle 设置width: 100%，而 left 和 right 的width属性值分别为 content 的左右内边距。
5. 为 left 和 right 分别设置margin-left，由于 middle 也是浮动元素，所以这样会使 left 和 right 向上层浮动。
6. 通过position: relative，分别将 left 和 right 向左右两侧拉扯。

由于 left 设置了margin-left: -100%，当 content 内容区的宽度小于 left 的宽度时，此时 left 左移的距离小于 left 自身的宽度，导致 left 并不会向上移动到与 middle 同层。简言之，布局乱了。

<div class="content">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
.content {
    padding: 0 200px;
}
.middle {
    width: 100%;
    height: 80px;
    float: left;
    background: green;
}
.left {
    width: 200px;
    height: 80px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background: red;
}
.right {
    width: 200px;
    height: 80px;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
    background: blue;
}
</style>

双飞翼布局

圣杯布局的升级版，修改 DOM 结构，然后使用margin代替padding。

<div class="content">
    <div class="middle">
        <div class="inner-middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
.middle {
    width: 100%;
    height: 80px;
    float: left;
}
.inner-middle {
    margin: 0 200px;
    height: 80px;
    background: green;
}
.left {
    width: 200px;
    height: 80px;
    float: left;
    margin-left: -100%;
    background: red;
}
.right {
    width: 200px;
    height: 80px;
    float: left;
    margin-left: -200px;
    background: blue;
}
</style>