布局是网页的框架，灵活的布局可以让页面信息得以合理的摆放，强健的布局方案可以适应不同分辨率下页面的显示。

1、上中下三栏式

2、左右两栏式

3、左右加页眉页脚

4、左中右三栏式

       浮动布局

       双飞翼布局

       圣杯布局

       弹性布局

一、上中下三栏式

1、等宽布局

这种布局方案是上中下等宽，目前比较少见了。

See the Pen  等宽三栏布局by zhaolanzhen (@mrszhao)  on CodePen.

2、上下百分比，中间版心固定宽

这种“工”字型的上中下三栏布局是目前比较主流的方式，比如站酷等就是这样的布局。

这种布局需要注意的是，上下百分比的布局需要设置最小宽度为版心的宽度。

See the Pen  百分比三栏布局by zhaolanzhen (@mrszhao)  on CodePen.

二、左右两栏式

1、混合浮动+普通流

左栏浮动，右栏不浮动，自适应。关键是父级设置为百分比。

See the Pen  左右两栏式1by zhaolanzhen (@mrszhao)  on CodePen.

2、纯浮动式

左右两栏都浮动，但是必须要设置两栏的宽度，因为浮动后的div宽度由内容撑开。但是设置固定值就失去了自适应的效果，可以利用calc()的方法，当然需要牺牲兼容性。

如果为右栏设置了最小宽度，则当父容器宽度不够的时候，右栏会被挤下去。所以也需要为父容器设置最小宽度。

<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>

.wrap{
    width:80%;
    /* 保证最小宽度为左栏+右栏最小宽度 */
    min-width:500px;
    margin:0 auto;
    overflow: hidden;
}
#left{
    width:200px;
    height:500px;
    background: #666;
    float: left;
}
#right{
    /* 计算出右栏的宽度，实现自适应 */
    width:calc(100% - 200px);
    height:500px;
    background: #eee;
    float: left;
    min-width:300px;
}

3、定位式

父容器相对定位，左右两栏绝对定位，也必须设置宽度，如果用了calc()自适应，为右栏设置了最小宽度时，如果父容器的宽度不够，则右栏会压在左栏上方。所以父容器也要设置最小宽度。

.wrap{
    width:80%;
    min-width: 500px;
    margin:0 auto;
    position: relative;
}
#left{
    width:200px;
    height:500px;
    background: #666;
    position: absolute;
    top:0;
    left:0;
}
#right{
    width:calc(100% - 200px);
    min-width: 300px;
    height:500px;
    background: #ddd;
    position: absolute;
    top:0;
    right:0;
}

三、左右加页眉页脚

中间如果有多栏的模块，先看成一个栏，再划分成多个栏。

See the Pen  左右加页眉页脚 by zhaolanzhen (@mrszhao)  on CodePen.

当然可以结合上面的方法做成自适应的效果。

四、左中右三栏式

1、浮动式

左右两栏浮动，中间栏不浮动，父元素设置百分比宽度，可以让中间栏实现宽度自适应。

但是html结构需要把中间栏放在最下面。设置好最小宽度避免布局崩掉。

这种方式简单，但是因为把最主要的中间栏放在了html结构的下方，不利于浏览器渲染。

<div class="wrap">
    <aside id="left"></aside>  
    <aside id="right"></aside>
    <!-- 主体结构放最下面 -->
    <section id="main"></section>  
</div>

.wrap{
    margin:0 auto;
    width:80%;
    min-width:720px;
}
#left{
    width: 200px;
    height:500px;
    background: #666;
    float: left;
}
#right{
    width: 200px;
    height:500px;
    background: #666;
    float: right;
}
#main{
    /* 因为没有浮动，所以宽度和父容器保持一致，可以实现自适应。 */
    min-width:300px;
    height:500px;
    background: #ccc;
    margin:0 210px;
}

2、双飞翼布局

为了让主体div的内容最先渲染，所以要改变布局。

双飞翼布局的关键点是，在主体div外面再加一个盒子做浮动，主体div不浮动，左右外边距用来放置浮动后利用负外边距回来的左右两栏。

<div class="wrap">
    <!-- 需要在主体div外面再加一个盒子做浮动。主体div两边加两个外边距，用来放置左右两栏。 -->
    <section id="main">
    <div class="content">#content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>

.wrap{
    margin:0 auto;
    width:80%;
}
#main{
    width:100%;
    /* 主体div外面的盒子做浮动 */
    float: left;
    background: #ccc;
}
#left{
    width:200px;
    float: left;
    height:500px;
    background: #666;
    /* 左栏利用左负外边距回到上个浮动div的最左边。此时的100%就是父容器的宽度。 */
    margin-left: -100%;
}
#right{
    width:200px;
    float: left;
    height:500px;
    background: #999;
    /* 右栏利用左负外边距回到上个浮动div的最右边，该边距的值和自己的宽度一致。 */
    margin-left:-200px;
}
/* 主体div不浮动，只需要设置好两边的外边距和左右两栏宽度一致即可 */
.content{
    height:500px;
    margin:0 200px;
}

See the Pen  双飞翼布局 by zhaolanzhen (@mrszhao)  on CodePen.

3、圣杯布局

圣杯布局和双飞翼布局都是经典的三栏布局方案，比起浮动布局的好处就是把主体内容移上去先渲染，不过圣杯布局的html结构更简单，但是样式要稍微复杂一点点。

main,left,right都左浮动，但是利用main的padding来为左右两个容器腾出空间。因为利用负外边距只能让left回到父容器里面的最左边，所以还需要让left容器的position定位改成relative，再利用right值翻出去。right容器利用margin-right的负值翻出去。

注意点是必须为父容器设置最小宽度，因为left是通过定位翻出去的，所以当right的容器碰到left容器原始位置的时候，就会把自个儿挤下去。所以父容器的最小宽度为：left容器宽度的两倍+right容器的宽度。

<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>

div{
    box-sizing:border-box;
}
.column{
    float: left;
}
#container{
    width:80%;
    /* 最小宽度为left容器宽度的两倍+right容器的宽度 */
    min-width:550px;
    margin: 0 auto;
    background-color: #ddd;
    height: 600px;
    /* 左右的内边距就是腾出左右两栏的空间 */
    padding: 0 150px 0 200px;
}
#center{
    width:100%;
    height: 500px;
    background-color: #f5c298;
}
#left{
    width:200px;
    height: 400px;
    background-color: #f9a4bd;
    /* 先回到父容器可用空间的最左边 */
    margin-left:-100%;
    position: relative;
    /* 再利用定位翻出去，也可以用left:-200px */
    right:200px;
}
#right{
    width:150px;
    height: 500px;
    background-color:#7ac8f5;
    /* 可以用定位，也可以直接用margin-right的负值 */
    margin-right:-150px;
}

双飞翼布局和圣杯布局的特性：

• 都是三栏布局，左右两栏固定宽度，中间栏自适应。

• html结构都提前渲染主体。

• 双飞翼主体结构多一个父容器。

• 双飞翼利用的是主体结构的父容器和左右两栏浮动，主体内容不浮动，利用主体内容的左右外边距腾出空间。再为左右两栏设置负外边距回到指定位置。

• 圣杯布局结构简单点，三栏都浮动，利用主体结构的内边距实现腾出空间，但是左栏除了负外边距外，还需要额外的定位才能实现。而且父容器必须指定最小宽度。

4、弹性布局

这估计是现代浏览器最好的布局方式了。也是最简单的布局方式。

可以让center扩展和收缩，左右两栏固定宽度，但是可以收缩。改变left的排序到最前面。而且因为可以收缩，不设置最小宽度，布局都不会乱。

<div id="container">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

#container{
    width:80%;
    margin: 0 auto;
    height: 500px;
    background-color: #ddd;
    /* 弹性布局 */
    display: flex;
}
#center{
    /* 让center可以扩展，收缩 */
    flex: 1;
    background-color: #eee;
}
#left{
    width:200px;
    background-color: #ccc;
    /* 把left的排序放在最前面 */
    order: -1;
}
#right{
    width: 150px;
    background-color: #aaa;
}

See the Pen  flex实现三栏布局 by zhaolanzhen (@mrszhao)  on CodePen.