学前端的小伙伴们都知道，CSS学起来很容易，但是要学精通了却特别难。在前端市场需求火热的今天，竞争相当激烈，光是会使用或者一两种实现的方式是远远不够的。不仅如此，还要深知各种解决方案的优劣，对各种特性了如指掌。
本次介绍的内容是CSS响应式布局--三栏布局
这是一道前端面试有关css内容的常考题。一般上来就会问：
请你实现一下三栏布局：
一般的同学只是想到了一两种比如 float、absolute，但是光是拿这些来回答面试官的问题是远远不够的。
现在请跟本问来过一遍这道问题：
实现三栏布局一般能想到5种布局方案：
1. float
2. absolute
3. flexbox
4. table
5. grid
首先设置下全局的样式：
<style>
*, html {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
color: #ffffff;
}
</style>下面是实例演示部分：
一、float布局
思路：
左右div一个左浮动，一个右浮动，固定宽度，中间就能自适应宽度了。
中间那栏div，是个块级元素，在不设宽度的前提下，会自动占满页面一整行。
由于左右div都设置了float，所以他们都会脱离文档流。也就是说，float元素在其父级article元素内不占据空间。
实际占据整个空间的是中间的div，而左右div则悬浮于中间div的上方，所以视觉上看起来左右div像是占据了左右两边栏。
浮动元素虽然脱离文档流，不受父级元素控制、不影响其它非浮动子元素的布局，但是它会对子元素的文本内容造成影响，其效
果也就是我们平常使用的word中的文字环绕效果。
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: #cecece;
}
.layout.float .right {
float: right;
width: 300px;
background: #00a8fe;
}
.layout.float .center {
background: yellowgreen;
}
</style>
<article>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>Float Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
</article>
</section>实际效果：
问题：
1. 为什么三个div是左、右、中这样排列？
如果是按照左中右排列的话，效果会变成这样。右边那列换到了下一行显示。
原因在于浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于中间div先于右div渲染，之后的块级元素都会另起一行显示，所以右div会在下一行右浮动。
所以，为了解决此问题，先让左右div先浮动，顶格显示，然后再显示中间的div即可。
2. 清除浮动问题
此问题会在清除浮动一文中详细解答。
优点：由于float布局很早就被广泛使用，所以兼容性比较好
缺点：需要清除浮动。
二、absolute布局
思路：article下的左中右三个div都设置position为absolute, 左右div定宽，left:0, right:0。中间div设置left和right各位左右
div的宽度。
absolute为绝对定位，如果子元素position为absolute，那么它会相对于对其position为relative或者absolute的父级元素进行
定位，如果父级元素都满足不了要求，最终会相对于整个浏览器窗口进行定位。
<section class="layout absolute">
<style>
.layout.absolute article div {
min-height: 100px;
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: #CECECE;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: #9ACD32;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Absolute Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
优点：使用快捷
缺点：可实用性不高，因为如果布局内部子元素多而且很复杂时，其内部布局需要涉及的相对计算比较多，导致其内部子元素也
需要设置为absolute，脱离了文档流。使整个页面布局，调试起来非常困难。
三、 flexbox布局
思路：article元素设置display为flex，其子元素左右div均为定宽，中间设置flex为1.
flexbox会将内部子元素（如果不设置宽高），根据其所占比例（flex: 1）自动计算子元素的尺寸，均匀排列
<section class="layout flex">
<style>
.layout.flex article {
display: flex;
}
.layout.flex .left {
width: 300px;
background: #CECECE;
}
.layout.flex .right {
width: 300px;
background: #9ACD32;
}
.layout.flex .center {
flex: 1;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Flex Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
优点：解决了上述两种布局的问题，实现了布局优化，所用于移动端
缺点：版本比较多，需要做兼容性处理
四、table布局
思路: table布局比较简单，这里只要设一行三列即可。整个table100%宽，左右两列定宽，中间自适应。
ps：这里换成table、tr、td元素效果相同
<section class="layout table">
<style>
.layout.table {
margin-top: 10px;
}
.layout.table article {
display: table;
width: 100%;
height: 100px;
}
.layout.table div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: #CECECE;
}
.layout.table .right {
width: 300px;
background: #9ACD32;
}
.layout.table .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Table Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
优点： 兼容性好，使用方便。
缺点： 其中一个 单元格高度变化，旁边也会随之高度变化。换句话说，不能自定义某一栏的高度，所有的单元格必须等高。
五、grid布局
思路：grid布局是css3新出的一种布局，常用于报刊杂志那种多栏目布局。通过对父元素article设置display: grid
再设置 grid-template-columns 及grid-template-rows即可。非常便捷。
<section class="layout grid">
<style>
.layout.grid {
margin-top: 10px;
}
.layout.grid article {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.layout.grid .left {
background: #CECECE;
}
.layout.grid .right {
background: #9ACD32;
}
.layout.grid .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Grid Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>效果：
优点：编写方便
缺点：由于是比较新，兼容性会是一个问题，比如ie10之前的版本不支持
以上就是三栏布局的五种写法，如果有疑问，请在下方留言。