CSS双飞翼布局前端面试高频之双飞翼布局，双飞翼布局和前面讲的圣杯布局类似，精髓都是设置margin负值，二者实现不同的

双飞翼布局和前面讲的圣杯布局类似，精髓都是设置margin负值，二者实现不同的地方在于其html结构不同，双飞翼布局在center元素的内部又加入了一个inner，通过这个inner的margin来解决左右两边覆盖的问题。

具体就是使用inner的margin来代替圣杯布局的padding，省去了定位的操作。
#inner {
		margin: 0 200px 0 150px;
	}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style>
	#header,#footer {
		background-color: gray;
		text-align: center;
		height: 100px;
		line-height: 100px;
	}
	#container {
		overflow: hidden;
	}
	
	#inner {
		margin: 0 200px 0 150px;
	}
	
	.column {
		height: 250px;
		float: left;
	}
	
	#center {
		width: 100%;
		background-color:tomato;
	}
	#left {
		margin-left: -100%;
		width: 150px;
		background-color: blue;
	}
	#right {
		margin-left: -200px;
		width: 200px;
		background-color: green;
	}
	#footer {
		clear: both;
	}
	</style>	
</head>
<body>
	<div id="header">header</div>
	<div id="container">
		<div id="center" class="column">
			<div id="inner">inner</div>
		</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>