前端 双飞翼布局和圣杯布局

说明：圣杯布局和双飞翼布局，它们的都是要求三栏布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，二双飞翼布局是对圣杯布局的一种改良。

1.圣杯布局： 用到浮动，负边距，相对定位，不添加额外标签。

html部分：
	<div class = "header"> header </div>
	<div class = "bd"> 
		<div class = "main" > main </div>
		<div class = "left" > left </div>
		<div class = "right" > right </div> 
	</div>
	<div class = "footer"> footer </div>
css 部分
	*{margin:0 auto};
	.header,.footer{
		width:100%;
		background: #666;
		height:30px;
		clear:both;
	}
	.bd{
		padding-left:150px;
		padding-right:190px;
	}
	.left{
		height:500px;
		background:red;
		width:150px;
		float:left;
		margin-left:-100%;
		position:relative;
		left:-150px; 
	}
	.main{
		height:500px;
		background:blue;
		width:100%;
		float:left; 
	}
	.right{
		height:500px;
		background:olive;
		width:190px;
		float:left;
		margin-left:-190px;
		position:relative;
		right:-190px;
	}

2.双飞翼布局：
	在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后圣杯布局是有局限性的，而且宽度控制要改的地方很多，在淘宝ued讨论下，增加多一个div就可以使用相对布局，只用到了浮动和负边距。

	html部分
		<div class = "header" > header </div>
		<div class = "bd" > 
			<div class = "main >
				<div class = "inner" > main </div>
			</div>
			<div class = "left" > left </div>
			<div class = "right" > right </div>
		</div>
		<div class = "footer" > footer </div>
	css部分
		
		*{margin:0 auto};
		.header,.footer{
			width:100%;
			background:#008888;
			height:100px;
			clear:both;
		}
		.left{
			height: 300px;
			background:red;
			width:150px;
			float:left;
			margin-left:-100%;
		}		 
		.main{
			height:300px;
			background:blue;
			width:100%;
			float:left; 
		}
		.inner{
			height:300px;
			margin-left:150px;
			margin-right:190px;
		}
		.right{
			height:300px;
			background:olvie;
			width:190px;
			float:left;
			margin-left:-190px;
		}