圣杯布局

圣杯布局也就是三列布局（反正我觉得不像圣杯）,就像这样：

中间是主要内容，两边是其他内容如广告什么的，中间的内容区是自适应大小的，而两边的是固定大小，可能这样的布局很容易让人想到用flex布局实现，一开始我也是这么想的，但圣杯布局有一个关键的地方就是中的主要内容区要优先加载，而文档加载是按结构顺序加载的，所以center这个区块就要放在left和right前面，结构如下：

    <div class="box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

首先让box中所有的div浮动起来，排成一列，并将center的宽度设为100%，这样的话就变成两行了，left和right被挤到了第二行：

要实现上图的效果就需要用到负值的margin:

.left {
            width: 100px;
            height: 100px;
            float: left;
            background: blue;
            margin-left: -100%;
        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
            margin-left: -100px;
        }

但这样还不算完成，因为center中的内容被覆盖了，所以最后一步就是将最外层的box设置左右的padding为left和right的宽度，挤出空间留给left和right，并将left和right都设置绝对定位固定在两边，完整代码：

.box {
            height: 100px;
            overflow: hidden;
            padding: 0 100px;
        }
        .center {
            width: 100%;
            height: 100px;
            float: left;
            background: red;
        }
        .left {
            width: 100px;
            height: 100px;
            float: left;
            background: blue;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }