圣杯布局和双飞翼布局

圣杯布局

三栏布局 左右两栏宽度固定 中间一栏宽度自适应 比如左宽300px 右宽200px 中间宽度为100%。
1 写结构，注意顺序 中—左---右
2 中间一栏宽度设置设置为100%（必须写），
3 给左中右三栏设置浮动
4 给左侧加margin-left：-100%，让左侧盒子移动到第一行最左边的位置
5 给右侧盒子设置margin-left:-200px(右侧盒子的宽度)，让右侧盒子移动到第一行最右边位置
6 给它们的父元素设置左右两侧的padding值，padding： 0 200px 0 300px （分别是左右两侧盒子的宽度）让所有子元素都往中间移动
7 使用相对定位，把左右两侧的盒子定位至空白区域
8 给父元素设置最小宽度为左右两侧盒子宽度之和。
注意：如果不给父元素设置最小宽度的话，浏览器变小的时候，左右两边盒子会掉下来。
但是，
父元素的宽度不设置，如果设置为100%的话，因为有padding的存在，浏览器下边会有滚动条。（即左右两侧的盒子总会有一个在“外面”）。

双飞翼布局

前五步和圣杯布局相同
6 在中间一栏里再加一个盒子，给此盒子设置左右两侧的margin或padding，让内容往中间挤。
7 给大盒子设清除浮动和最小宽度
注意，最小宽度应该大于左右两侧盒子宽度之和，如果等于的话，大盒子则刚好放下左右两侧，看不到中间。