5种实现3栏布局的方法（左右顶宽，高度已知，中间自适应）

5种实现3栏表布局的方法，html相同，仅改变css

<section class="layout">
	<article class="box">
		<div class="left"></div>
		<div class="center">
			<h1>各种方法</h1>
			中间
		</div>
		<div class="right"></div>
	</article>
</section>

浮动布局（float）

.layout article div{
	height: 100px;
}
.layout .left{
	float: left;
	width: 300px;
	background: red;
}
.layout .right{
	float: right;
	background: blue;
	width: 300px;
}
.layout .center{
	background: green;	
}

优点：兼容性好，时候多种浏览器

缺点：使结构脱离文档流。

定位布局（position）

.layout{
	position: relative;
}
.layout article div{
	height: 100px;
	position: absolute;
}
.layout .left{
	width: 300px;
	left: 0;
	background: red;
}
.layout .right{
	background: blue;
	width: 300px;
	right: 0;
}
.layout .center{
	left: 300px;
	right: 300px;
	background: green;
}

优点：快捷方便，配合js可以快速生成和修改 

缺点：结构内子元素脱离文档流

弹性布局（flex）

.box{
	display: flex;
}
.layout article div{
	height: 100px;
}
.layout .left{
	width: 300px;
	background: red;
}
.layout .right{
	background: blue;
	width: 300px;
}
.layout .center{
	background: green;
	flex: 1;
}

优点： 相对来说最优的一种方法，随着浏览器支持越来越多。

表格布局（table）

.box{
	width: 100%;
	height: 100px;
	display: table;
}
.layout article div{
	display: table-cell;
}
.layout .left{
	width: 300px;
	background: red;
}
.layout .right{
	background: blue;
	width: 300px;
}
.layout .center{
	background: green;
}

 优点：兼容性（ie8等）

缺点：整个table是一个整体，在高度不确定的时候不适合

网格布局

.box{
	width: 100%;
	height: 100px;
	display: grid;
	grid-template-rows: 100px;
	grid-template-columns: 300px auto 300px;
}
.layout article div{

}
.layout .left{
	width: 300px;
	background: red;
}
.layout .right{
	background: blue;
	width: 300px;
}
.layout .center{
	background: green;
}

优点：简化代码量，实现更多效果

缺点：技术新，浏览器支持率低

 当高度不确定时，只有flex布局和table布局还可以使用，其他布局会出现问题