几种常见的三列布局，中间自适应，两边定宽

在这里，介绍几种我所了解到的几种三列布局。实现的方法分别是：

两边绝对定位，中间设置margin-left和margin-right。
两边分别左右浮动，中间设置margin-left和margin-right。
圣杯布局。
双飞翼布局。
BFC布局，左边左浮动，设置margin-right：120px，右边右浮动，设置margin-left：120px，设置中间部分：overflow: hidden, 形成BFC。
flex，这里就没有单独介绍了。

看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>

		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		.container {
			 100%;
			margin-bottom: 20px;
		}
		.main {
			height: 200px;
			background: red;
		}
		.left, .right {
			 100px;
			height: 200px;
			background: #999;
		}

		/*绝对定位*/
		.absolute {
			position: relative;
		}
		.absolute .left {
			position: absolute;
			left: 0;
			top: 0;
		}
		.absolute .right {
			position: absolute;
			right: 0;
			top: 0;
		}
		.absolute .main {
			margin-left: 120px;
			margin-right: 120px;
		}

		/*浮动定位*/
		.float .left {
			float: left;
		}

		.float .right {
			float: right;
		}
		
		.float .main {
			margin-left: 120px;
			margin-right: 120px;
		}

		/*圣杯布局*/
		.shengbei .main, .shengbei .left, .shengbei .right {
			float: left;
		}

		.shengbei .left {
			margin-left: -100%;
			position: relative;
			left: -120px;
		}

		.shengbei .right {
			margin-left: -100px;
			position: relative;
			right: -120px;
		}

		.shengbei .main {
			 100%;
		}
		
		/*这里用了box-sizing， 兼容性不是很好*/
		.shengbei.clearfix {
			box-sizing: border-box;
			padding-left: 120px;
			padding-right: 120px;
		}

		..clearfix::after {
			content: '';
			display: block;
			clear: both;
		}


		/*双飞翼布局*/
		.fly .main {
			 100%;
			background: #fff !important;
		}
		.fly .main, .fly .left, .fly .right {
			float: left;
		}	
		.fly .left {
			margin-left: -100%;
		}
		.fly .right {
			margin-left: -100px;
		}
		.fly .main .inner {
			margin-left: 120px;
			margin-right: 120px;
			background: red;
			height: 200px;
		}

		/*bfc布局*/
		.bfc .left {
			float: left;
			margin-right: 20px;
		}

		.bfc .right {
			float: right;
			margin-left: 20px;
		}
		
		.bfc .main {
			overflow: hidden;
		}

	</style>
</head>
<body>
	<div class="container absolute">
		<div class="left"></div>
		<div class="main">absolute</div>
		<div class="right"></div>
	</div>

	<div class="container float">
		<div class="left"></div>
		<div class="right"></div>
		<div class="main">float: 因为浮动脱离了文档流，所以将main放在最后。</div>
	</div>
	
	<div class="container shengbei clearfix">
		<div class="main">圣杯布局，main放在最前面，最开始渲染</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>

	<div class="container fly clearfix">
		<div class="main">
			<div class="inner">
				双飞翼布局: 注意取消main的背景颜色，设置inner的颜色和高度。
			</div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</div>

	<div class="container bfc">
		<div class="left">margin-right: 20px;</div>
		<div class="right">margin-left: 20px;</div>
		<div class="main">bfc布局: overflow: hidden;</div>
	</div>

</body>
</html>