CSS实现三栏布局的五种方式

公用html：

<article class="main">
		<div class="left">左</div>
		<div class="center">中<br><br><br><br><br><br><br><br>中</div>
		<div class="right">右</div>
</article>

公用css：

*{
	margin:0;
	padding: 0;
}

一、float布局

html：

<article class="main">
		<div class="left">左</div>
		<div class="right">右</div>
		<div class="center">中<br><br><br><br><br><br><br><br>中</div>
</article>

css：

.left{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
}
.right{
	width: 100px;
	height: 100px;
	background: green;
	float: right;
}
.center{
	margin-left: 100px;
	margin-right: 100px;
	background: pink;
}

要注意一点，这种方法要将中间栏放在最后，因为若将中间栏放在中间，并没有设置浮动的话，会占据文档中的这行位置，导致右边栏并不能完全和左边栏平齐。

由于我们使用了float会导致父元素高度塌陷而导致问题, 所以为了不影响其他元素的显示这里需要清除浮动

二、position布局

css：

.left{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	left: 0;
}
.right{
	width: 100px;
	height: 100px;
	background: green;
	position: absolute;
	top: 0;
	right: 0;
}
.center{
	background: pink;
	position: absolute;
	left: 100px;
	right: 100px;
}

绝对定位会脱离文档流，如果其他元素位置有要求的话，需要继续设置定位

三、table布局

table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table或inline-table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell
css：

.main{
	/*必须要*/
	width: 100%;
	display: table;
}
.left,.right,.center{
	display: table-cell;
}
.left{
	width: 100px;
	height: 100px;
	background: red;
}
.right{
	width: 100px;
	height: 100px;
	background: green;
}
.center{
	background: pink;
}

table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息

四、弹性（flex）布局

当给元素设置display:flex 或 inline-flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列

.main{
	/*必须要*/
	width: 100%;
	display: flex;
	/*两端对齐*/
	justify-content:space-between;
}

.left{
	width: 100px;
	height: 100px;
	background: red;
}
.right{
	width: 100px;
	height: 100px;
	background: green;
}
.center{
	width:100%;
	background: pink;
}

flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上

五、网格（gird）布局

网格它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

.main{
	/*必须要*/
	width: 100%;
	/*网格布局*/
	display: grid;
	/*行高*/
	grid-template-rows: 100px;
	/*列宽*/
	grid-template-columns: 300px auto 300px;
}

.left{
	background: red;
}
.right{
	background: green;
}
.center{
	background: pink;
}

grid布局很强大，但是兼容性很差