三栏布局一般指左右两栏固定宽度，中间一栏自适应的布局方法，也是许多网站常用的布局方式。如下图：
该示例在一个html文件中编写，为方便起见，预先写好一个通用的css，左右宽度都为100px；
1.浮动三栏
左右两栏均为float，中间一栏宽度自适应，这里为了中间一栏的安全输入空间，要为中间一栏加上左右margin。因为block元素自带换行效果，所以main要放在左右元素的后面，而dom元素是按顺序加载的，因此main不能在左右两栏之间完成加载。
2.利用BFC
利用BFC不与float元素叠加的特点，让中间一栏通过设置overflow属性拥有BFC特性，实现了这个三栏布局。
该布局同样不能让main在左右两栏之前加载。
后面介绍的四种三栏布局可以让main在左右两栏之前加载。
3.absolute实现三栏布局
使用absolute定位，只需将左右两栏绝对定位到窗口两边，为main添加左右margin创建安全输入区域即可。因为absolute是以第一个定位不是static的父元素定位的，为这个整体添加一个定位不是static的父元素，绝对定位不会与header，footer等重叠。并且main的dom位置在left和right的前面，可在左右两栏之前完成加载
4.flex
flex为一种弹性布局方式，flex-direction默认为row，即按行排列；order可以指定在元素在一个flex盒子之中的排列顺序；将main放在left和right前面，并为其设置order至left和right的中间，可以让main优先加载，并且位置不变；flex-grow属性为元素相对放大比率，默认为0，即不放大，设置为1时会自动扩展。
5.圣杯布局
首先，建立main，left，right之间的dom结构，将main的width设为100%，main,left和right均为向左浮动，此时的界面如图：
然后利用负margin对元素碰撞的改变，让下面的两个元素上去。对left，要到最左边，margin-left设为-100%，right要到右边，margin-left设为负的自身宽度，现在界面如图
到这里的步骤都与下面的双飞翼布局一致。
虽然left和right都到了main两边，但main还没有安全输入区间，比如圣杯两字被left盖住了。
为这个整体的父元素box加padding，并用relative将left，right移至对应的位置。
即完成了圣杯布局，可完成main在left，right之前加载。
6.双飞翼布局
双飞翼的步骤基本同圣杯布局，不过在main里面嵌套了一个块级元素，为那个块级元素设置margin，在这个块级元素之中输入的内容不会被覆盖，并在left，right之前载入
网友评论