css布局---三栏布局（左右固定宽高中间自适应）——七种实现方
一、浮动方式实现
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
HTML代码：
<ul>
<li class="bian-left">我是左边</li>
<li class="bian-right">我是右边</li>
<li class="bian-center">我是中间</li>
</ul>
CSS代码：
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
height: 300px;
list-style: none;
}
.bian-left {
float: left;
width: 300px;
height: 200px;
background: red;
}
.bian-right {
float: right;
width: 300px;
height: 200px;
background: red;
}
.bian-center {
margin-left: 300px;
margin-right: 300px;
background: green;
height: 200px;
}
注：
浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。
该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。
二、绝对定位方法
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
HTML代码：
<div>
<div class="bian-left">left</div>
<div class="bian-right">right</div>
<div class="bian-center">center</div>
</div>
CSS代码：
* {
margin: 0;
padding: 0;
}
.bian-left {
position: absolute;
left: 0;
width: 300px;
height: 200px;
background: green;
}
.bian-right {
position: absolute;
right: 0;
width: 300px;
height: 200px;
background: green;
}
.bian-center {
margin-left: 300px;
margin-right: 300px;
background: palevioletred;
height: 200px;
}
注：
该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生压缩。
绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的
三、弹性盒子
CSS3新推出的弹性盒属性可以非常完美实现三栏式布局
HTML代码：
<ul>
<li class="bian-left">我是左边</li>
<li class="bian-center">我是中间</li>
<li class="bian-right">我是右边</li>
</ul>
CSS代码：
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
.bian-left {
width: 300px;
height: 200px;
background: green;
}
.bian-right {
width: 300px;
height: 200px;
background: green;
}
.bian-center {
flex: 1;
background: plum;
}
注
felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox的缺点就是不能兼容IE8及以下浏览器。
四、圣杯布局
圣杯布局来源于In Search of the Holy Grail
HTML代码：
<div class="content">
<div class="center">
我是中间
</div>
<div class="left">
我是左边
</div>
<div class="right">
我是右边
</div>
</div>
首先定义出整个布局的DOM结构，主体部分是由content包裹的center,left,right三列，其中center定义在最前面。
CSS部分：
假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在content上设置：
.content {
padding-left: 200px;
padding-right: 150px;
}
为左右两列预留出相应的空间，得到如下示意图：
zhao
随后分别为三列设置宽度与浮动
.left {
float: left;
width: 200px;
background: green;
}
.right {
float: left;
width: 150px;
background: red;
}
.center {
float: left;
width: 100%;
background: gold;
}
得到如下效果：
image.png
根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。
接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距（nagetive margin）：
.left {
float: left;
width: 200px;
background: green;
margin-left: -100%;
}
得到：
image.png
随后还需要使用定位(position)方法：
.left {
float: left;
width: 200px;
background: green;
margin-left: -100%;
position: relative;
right: 200px;
}
这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：
image.png
接下来放置right，只需添加一条声明即可：
.right {
float: left;
width: 150px;
background: red;
margin-right: -150px;
}
image.png
将right移动到预留位置
至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：
body {
min-width: 550px;
}
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body {
min-width: 550px;
}
.content {
padding-left: 200px;
padding-right: 150px;
}
.left {
float: left;
width: 200px;
background: green;
margin-left: -100%;
position: relative;
right: 200px;
}
.right {
float: left;
width: 150px;
background: red;
margin-right: -150px;
}
.center {
float: left;
width: 100%;
background: gold;
}
.foot {
clear: both;
}
</style>
<body>
<div class="header">
</div>
<div class="content">
<div class="center">
我是中间
</div>
<div class="left">
我是左边
</div>
<div class="right">
我是右边
</div>
</div>
<div class="foot">
</div>
</body>
</html>
五、双飞翼布局
双飞翼布局来源于淘宝UED
1. DOM结构
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2. CSS代码
按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
得到如下效果示意图：
image
以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。
将left放置到预留位置：
#left {
width: 200px;
margin-left: -100%;
}
得到：
image
将right放置到预留位置：
#right {
width: 150px;
margin-left: -150px;
}
得到最终效果：
image
最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖，如下所示：
image
因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有：
body {
min-width: 500px;
}
至此双飞翼布局大功告成！其布局整体代码为：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
关于双飞翼布局的示例，可参考：双飞翼布局
六、表格布局
表格布局的好处是能使三栏的高度统一
HTML代码：
<div id="container">
<div class="left">
左边
</div>
<div class="center">
中间
</div>
<div class="right">
右边
</div>
</div>
步骤：
给三栏都设置为表格单元 display: table-cell
left 和 right width: 200px，center width: 100%
这时 left 和 right 被挤到两边去了，因此要分别设置min-width: 200px确保不会被挤压。
CSS代码：
#container>div {
display: table-cell;
}
.left,
.right {
width: 200px;
min-width: 200px;
background: red;
}
.center {
background: green;
width: 100%;
}
这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染
七、网格布局
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。
HTML代码：
<div id="container">
<div class="left">
左边
</div>
<div class="center">
中间
</div>
<div class="right">
右边
</div>
</div>
步骤：
给 container 设置为display: grid
设置三栏的高度：grid-template-rows: 100px
设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 200px auto 200px;
#container {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
仅仅四条样式命令就能完成三栏布局，可见网格布局之强大
