常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

1. 两栏布局
左边左浮动 ， 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响

2.圣杯布局
两侧固定宽度，中间自定义
比如一个大盒子里面嵌套了三个小盒子，分别为左边右边和中间

1. 先给大盒子一个paddind：0 200px
2. 左/右边分别为200px
3. 中间100%宽度
4. 里面的小盒子都浮动 （这个时候中间的盒子撑满了一行，把两个小盒子撑到下面）
5. 给左边小盒子 margin-left : -100% (这个时候左边小盒子到中间区域最左边) 然后给一个相对定位设置left为-200px
6. 给右边小盒子 margin-left : -200px (这个时候右边小盒子到中间区域最右边) 然后给一个相对定位设置left为200px

3、双飞翼布局
同圣杯布局
是用margin