圣杯布局与双飞翼布局

圣杯布局和双飞翼布局都是三栏布局的解决方案，当然稍加改动也适合两栏布局。

圣杯布局的原理：

原理：负边距+relative定位

1. 父容器下放置三个浮动的div
2. 中间的主块宽度为父容器的100%，左边和右边的的盒子宽度固定
3. 主块下左边的盒子左边距设置为-100%（父容器的宽度），右边的盒子左边距设置为负的其宽度
4. 主块设置左右内边距，分别为左右盒子的宽度
5. 左右盒子设置relative，其中，左边的盒子向左移动其宽度值，右边的盒子向右移动其宽度值

双飞翼布局的原理：

1. 父容器下放置三个浮动的div,其中，为主块盒子单独设置一个子div
2. 中间的主块宽度为父容器的100%，左边和右边的的盒子宽度固定
3. 主块下左边的盒子左边距设置为-100%（父容器的宽度），右边的盒子左边距设置为负的其宽度
4. 为主块盒子的子div设置左右外边距，分布略大于左右盒子的宽度值

总结：圣杯布局和双飞翼布局的步骤1、2、3其实都是一样的，从步骤4开始不一样，圣杯布局利用父元素的padding和左右容器的relative来还原主块被覆盖的地方，而双飞翼布局在主块里多加了一层结构，利用这一层结构的margin
来还原主块被覆盖的地方。