总结圣杯布局和双飞翼布局

很久以前就知道这两个布局，但一直觉得这两个布局有点奇怪，可能是因为以前没有用过这种方法。但是因为兼容会很好，而且可以自适应中间区块，所以好像还是很多人用。今天动手写了demo，虽然比较容易就能做出来，但这里面的有些地方还是感觉怪怪的，最后有我的不明白的地方。下面是具体的两种写法以及区别。

---

圣杯布局

圣杯布局是一种常用的网页布局，他可以由现有的技术来实现，现有的布局多多少少都有些缺点，所以找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。注意下这里left和center的位置放置。其实主要思想就是让三列布局都浮动后，设置中间浮动的元素的宽度为100%，利用padding留出两边left和right的距离，再利用定位的思想把左右两个盒子放在该放的位置上。

<div class="header"></div>
<div class="container">
	<div class="center"></div>
	<div class="left"></div>		
	<div class="right"></div>
</div>
<div class="footer"></div>

body{
	min-width: 640px; /*两倍的左边距离加上右边距离，如果不加，当resize窗口的时候会出现问题*/
}
.header,.footer{
	background: red;
	height: 50px;
}
.container{
	padding-left: 220px;
	padding-right: 200px;
}
.center,.left,.right{
	float:left;
	min-height: 500px;
	position:relative;
}		
.center{
	width:100%;
	background: yellow;
	opacity: 1;
}
.left{
	width:220px;
	background: lightgreen;
	margin-left: -100%;
	right:220px;
}
.right{
	width:200px;
	background: blue;
	margin-right: -200px;
}
.footer{
	clear:both;
}

---

双飞翼布局

双飞翼布局由淘宝UED提出来。如果把三栏布局当做一个大鸟的话，可以吧main当做鸟的身体，sub和extra当做鸟的两个翅膀，这个布局的实现思路是先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。是在圣杯布局上的修改，不再使用relative和padding,改用直接添加一个元素inner，并用margin来实现。之所以这么改我猜是因为一旦我们设置了relative就很难再对其做别的定位。
主要代码如下：这里添加了inner，设置center为100%以后，再对inner设置margin,这样就可以使内部元素不受影响，不会被盖住。注意注释掉的就是圣杯布局的部分写法。

<div class="header"></div>
<div class="container">
	<div class="center">
		<div class="inner">fad</div>
	</div>
	<div class="left"></div>		
	<div class="right"></div>
</div>
<div class="footer"></div>

body{
	min-width: 640px;
}
.header,.footer{
	background: red;
	height: 50px;
}		
.center,.left,.right{
	float:left;
	min-height: 300px;
	/*position:relative;*/
}		
.center{
	background: yellow;
	width: 100%;
}
.left{
	width:220px;
	background: lightgreen;
	/*margin-left: -100%;
	right:220px;*/
	margin-left: -100%;
}
.right{
	width:200px;
	background: blue;
	margin-left: -200px;
}
.footer{
	clear:both;
}
.inner{
	margin:0px 200px 0px 220px;
}