CSS圣杯布局 && 双飞翼布局

两者作用和区别：

圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染

区别：

两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。
圣杯布局是通过父元素设置padding-left和padding-right为左右两边的盒子留空间。然后左右两盒子通过相对定位，改变left和right的值。移动后不遮挡中间div
双飞翼布局是直接在中间div内部创建子div，用于放置内容。并且设置子div的margin-left和margin-right,为左右两个div留出位置，左右两个盒子不需要设置position:relative和right,left属性。个人感觉比圣杯布局要简单一些。具体操作参考下面代码

1，圣杯布局特点

（1）父元素包含三个元素，分别设置他们左浮动
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染
（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）
（4）中间的盒子width:100%后，需要父元素通过padding设置左右两边空白，为左右两边的盒子留同等大小的空间
（5࿰