css+div基本布局

先整理一下基础知识，从布局开始，每天整理几个，由简单到复杂吧

今天说说等高布局，圣杯和双飞翼吧

等高布局

等高布局简单来说，就是两栏高度相等啦，像下面这样。

实现两栏等高布局的方式有很多，边距抵消、table、flex等，以下就以这三种来写

<section>
	<article id='right'>
		layout<br />
		layout<br />
		layout<br />
		layout<br />
		layout<br />
	</article>
	<article id='left'>
		layout
	</article>
</section>

/*边距抵消：你需要了解一下BFC（块级格式化上下文）相关的知识*/
section{overflow:hidden;}
article{float:left;margin-bottom:-9999px;padding-bottom:9999px;width:50%}
#left{background-color:red}
#right{background-color:yellow}

/*flex*/
section{display:flex}
#left{flex:1;background-color:red}
#right{flex:1;background-color:yellow}

/*table*/
section{display:table-row}
article{display:table-cell;width:800px}
#left{background-color:red}
#right{background-color:yellow}

圣杯布局和双双飞翼布局

圣杯和双飞翼实现的功能是一样的，只是实现方式不同

都是下面这种效果。

圣杯布局来源于a list part上的这篇文章： 
http://alistapart.com/article/holygrail 
双飞翼布局由淘宝UED提出： 
http://www.imooc.com/wenda/detail/254035

圣杯布局

<section class='body'>
	<artical class='content'>content</artical>
	<aside class='left'>left</aside>
	<aside class='right'>right</aside>
</section>

.body{min-width:200px;margin:0 200px 0 200px}
.left,.right,.content{position:relative;float:left;height:200px;}
.left,.right{width:200px}
.left{background-color:red;margin-left:-100%;left:-200px}
.right{background-color:red;margin-left:-200px;right:-200px}
.content{background-color:pink;width:100%}

双飞翼布局

<section class='body'>
		<section class='main'>
		<artical class='content'>content</artical>
		</section>
		<aside class='left'>left</aside>
		<aside class='right'>right</aside>
</section>

.body{min-width:600px;}
.left,.right,.main{float:left;height:200px;}
.left,.right{width:200px}
.left{background-color:red;margin-left:-100%}
.right{background-color:red;margin-left:-200px}
.main{width:100%;background-color:pink}
.content{margin:0 200px 0 200px;}

圣杯布局和双飞翼布局的差别是：处理中间内容区域不被遮挡的解决方式。