圣杯布局

1、三者都设置向左浮动。

2、设置main宽度为100%。

3、设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。

4、设置bd的padding值给左右两个子面板留出空间。

5、设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。

双飞翼布局

1、三者都设置向左浮动。

2、设置main宽度为100%。

3、设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。

4、设置main-content的margin值给左右两个子面板留出空间。

两者区别：

1、双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。

2、 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。

3、 双飞翼布局不用设置相对布局，以及对应的left和right值。

双飞翼布局更加简洁，响应式更好。