等高左中右结构与卷帘门

原理分析： 

    子元素浮动，父元素不设高度，而是通过清除浮动(这里是通过触发ie的haslayout,和w3c的bfc达到清除浮动的效果)，被子元素撑开，形成自己高度。

    父元素中width用于触发haslayout，overflow:hidden用于触发bfc,overflow:hidden同时起到溢出隐藏的效果

通过同时给左中右3个板块使用“padding-bottom:1000px;”构建3个等高的范围，再通过3个“margin-bottom:-1000px;”把3个范围置于外部，结合父元素的“溢出隐藏”，3个板块具有了相同的0起点，同时隐藏着相同的高度背景，一个板块自身高度的变化都会影响到父元素的高度，父元素的高度又同时影响到3个板块的“溢出隐藏”的范围，从而最终达到“等高左中右结构”的效果。

打个比方：

    好比a、b、c三个人同时站在一个卷帘门后面，a、b、c无论是谁去打开卷帘门，在门外的路人看来，3个人被看到的部分都是一样高的，也就是"等高"的。

    等高左中右结构的父容器就是"卷帘门",左、中、右三个结构就是那三个人，要想让父容器具有卷帘门的效果，重点是：1、无高度且清除浮动；2、溢出隐藏

    子元素的padding-bottom:1000px;是创建“身高”，margin-bottom:-1000px;是藏到"卷帘门里面"，往a、b、c里放内容就是"抬卷帘门"，谁放的内容多，就相当于谁抬的最高，然后3个人被外面看到的高度就是由那个抬得最高的人决定的。

    演示链点：http://htmldog.github.io/demo_html/2014/08/11/same_height.html

    代码：

<style>
body{margin:0;}
.wrap{width:706px;margin:auto;overflow:hidden;}
.col-a,.col-b,.col-c{float:left;padding-bottom:1000px;margin-bottom:-1000px;}
.col-a,.col-c{width:100px;}
.col-a{background:#999;}
.col-c{background:#aaa;}
.col-b{width:500px;background:#ccc;}
</style>

<div class="wrap">
	<div class="col-a">
		<p>sdfasf</p>
	</div>
	<div class="col-b">qwqw</div>
	<div class="col-c"></div>
</div>