圣杯布局
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
1、三者都设置向左浮动。
2、设置main宽度为100%。
3、设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
4、设置bd的padding值给左右两个子面板留出空间。
5、设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。
双飞翼布局
<div id="main" class="column">
<div id="main-content">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
1、三者都设置向左浮动。
2、设置main宽度为100%。
3、设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
4、设置main-content的margin值给左右两个子面板留出空间。
两者区别：
1、双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2、 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3、 双飞翼布局不用设置相对布局，以及对应的left和right值。
双飞翼布局更加简洁，响应式更好。
转载于:https://www.cnblogs.com/sun-web/p/8461672.html
