圣杯布局和双飞翼布局

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

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

css样式：

当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结构：

        

            
main
        

        
left
        
right

CSS样式：

最后的效果图：

image.png

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

image.png