两/三栏布局(圣杯双飞翼布局)

两栏布局

两栏布局,两个div盒子,左边固定宽度,右边自适应

左边盒子设置左浮动,右边盒子加overflow:hidden,然后清除左侧的浮动即可

圣杯双飞翼的特点

两侧宽度固定，中间宽度自适应

中间部分在DOM结构上优先，以便先行渲染

允许三列中的任意一列成为最高列

只需要使用一个额外的<div >外层 标签

圣杯布局

首先构建DOM结构,大的div里面三个小的div分别是中左右三部分,其中中间部分定义在最前面,中间部分在DOM结构上优先，以便先行渲染.

设置左右div固定宽度,中间部分宽度100%,中间部分设置padding-left或者-right左右的宽度即可,给父元素设置左浮动,因为中间区域宽度100%,所以会单独占一行,左右分别在下面,给左边的元素的margin-left为-100%，右边的设置margin-right-它自身的宽度即可,对left和right添加position：relative就实现了圣杯布局

双飞翼布局

双飞翼布局跟圣杯布局基本相同,双飞翼布局不仅能满足main处于优先加载的地位，也能更好解决圣杯布局的错乱问题，且css代码简单，缺点是增加了一个标签

实现:只需要给中间内容区域多套一个盒子,并且设置它的左右margin值为左右侧边栏的宽度,因为外部盒子进行了浮动,中间区域嵌套里面的盒子由于没有设置浮动，所以其宽度默认为外层盒子的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间,然后再将左边的元素的margin-left为-100%,右边的设置margin-right-它自身的宽度即可实现双飞翼布局