圣杯布局和双飞翼布局

相同点：都是固-弹性-固的布局方式；中间弹性布局的内容优先加载。

圣杯布局通过外层容器的padding以及内层左右子元素的margin值和相对定位，使左右元素分布在中间元素的两边。
html结构：

<div class="container">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>

css样式：

<style>
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background: #f0e
        }
        .left {
            position: relative;
            float: left;
            margin-left: -100%;
            /* 向左偏移180px */
            left: -180px;
            /* right: 180px; */
            width: 180px;
            height: 200px;
            background: #345;
        }
        .right {
            position: relative;
            float: left;
            margin-left: -200px;
            left: 200px;
            width: 200px;
            height: 200px;
            background: #fcc
        }
        .container::after {
            content: '';
            clear: both;
        }
        .container {
            padding: 0 200px 0 180px;
            /* width为100%的属性不能加，会使宽度撑宽，导致出现横向滚动条 */
            /* width: 100%; */
            height: 200px;
        }
</style>

当left元素其left偏移量缺失时，即如下所示：

position: relative;
float: left;
margin-left: -100%;
width: 180px;
height: 200px;
background: #345;

页面的布局结构为：

image.png

此时margin-left：-100%所取的具体值为class为main的元素宽度，left与main元素左重叠，如果希望left元素右边与main元素左边对齐，则需将left元素相对于自身向左偏移它本身的宽度。

双飞翼布局：
双飞翼布局的DOM结构，main元素会比圣杯布局的多一层。main元素通过margin将左右留白，然后左右元素通过margin-left和浮动飘到main元素左右两边。
DOM结构：

<div id="app">
        <div class='outer'>
            <div class="main">main</div>
        </div>

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

CSS样式：

<style>
        #app::after {
            content: '';
            clear: both;
        }
        .outer {
            float: left;
            width: 100%;
            height: 200px;
        }
        .main {
            margin-left: 200px;
            margin-right: 180px;
            height: 100%;
            background: #dfcd;
        }
        .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
            background: #ff6;
        }
        .right {
            float: left;
            margin-left: -180px;
            width: 180px;
            height: 200px;
            background: #9c0;
        }
</style>

最后的效果图：

image.png

如果不设置left元素和right元素的margin-left值，其样式为：

image.png