三栏布局的实现方法

对于三栏布局，大家应该很熟悉了，像淘宝等电商网站，亦或是某网站的后台管理系统，都有三栏布局的身影。如果你还不知道三栏布局是什么，可以先看下面这个效果图：

三栏布局

接下来，我会介绍六种三栏布局的实现方法，它们各有各的优点，当然也有其不足之处。

三栏布局——流体布局

// CSS
.left, .right, .center {
    height: 100vh;
}
.left {
    width: 200px;
    background: lightblue;
    float: left;
}
.right {
    width: 300px;
    background: yellowgreen;
    float: right;
}
.center {
    background: orangered;
    margin-left: 210px;
    margin-right: 310px; 
}   

// HTML
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

实现原理：左右边栏各自浮动，之后设置中间块的margin值，这样中间模块宽度就自适应了。
缺点：两侧内容先加载，主体内容后加载，当页面内容较多时会影响用户的体验。

三栏布局——BFC布局

// CSS
.left, .right, .center {
    height: 100vh;
}
.left {
    width: 200px;
    background: lightblue;
    float: left;
    margin-right: 10px;
}
.right {
    width: 300px;
    background: yellowgreen;
    float: right;
    margin-left: 10px;
}
.center {
    background: orangered;
    overflow: hidden;
}   

// HTML
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

实现原理：这种方式和流体布局差别很小，但是实现方式截然不同，这是利用了overflow: hidden;属性将中间模块转为BFC容器，利用BFC区域不会与浮动元素重叠这一特性，可以实现三栏布局。
缺点：同上。

三栏布局——Table布局

// CSS
.container {
    width: 100%;
    display: table;
}
.left, .center, .right {
    display: table-cell;
    height: 100vh;
}
.left {
    width: 200px;
    background: lightblue;
}
.center {
    background: orangered;
}
.right {
    width: 300px;
    background: yellowgreen;
}   

// HTML
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

实现原理：运用display: table-cell;这一特性，触发BFC特性，两边定宽，中间自动填满。
缺点：不能设置栏与栏之间的间距。

三栏布局——双飞翼布局

// CSS
.main {
    width: 100%;
    float: left;
}
.center, .left, .right {
    height: 100vh;
}   
.center {
    background: orangered;
    margin-left: 210px;
    margin-right: 310px;
}
.left {
    width: 200px;
    background: lightblue;
    float: left;
    margin-left: -100%;
}
.right {
    width: 300px;
    background: yellowgreen;
    float: right;
    margin-left: -300px;
}   

// HTML
<div class="main">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>

实现原理：利用浮动元素margin的负值来实现三栏布局，但是主体内容可以优先加载。
缺点：HTML和CSS设置比较繁琐。

三栏布局——flex布局

// CSS
.container {
    width: 100%;
    display: flex;
}
.left, .center, .right {
    height: 100vh;      
}
.left {
    width: 200px;
    background: lightblue;
}
.center {
    flex-grow: 1;
    background: orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.right {
    width: 300px;
    background: yellowgreen;
}   

// HTML
<div class="main">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>

实现原理：flex弹性布局，其中的关键是flex-grow: 1;属性使中间模块占据剩余空间，实现三栏布局。
缺点：只兼容IE+以及现代浏览器。

三栏布局——绝对定位布局

// CSS
.container {
    position: relative;
}
.center, .left, .right {
    height: 100vh;
}
.center {
    margin-left: 210px;
    margin-right: 310px;
    background-color: lightblue;
}
.left {
    width: 200px;
    background-color: orangered;
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    width: 300px;
    background-color: yellowgreen;
    position: absolute;
    right: 0;
    top: 0;
}   

// HTML
<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

实现原理：与流体布局相似，但中间模块可以优先加载。