负margin伪等高布局原理

　　　　最近工作不忙，沉下心来学习css，才发现自己很多东西自己都不明白为什么会达到这样的效果。在本文中，主要是记录下自己对负margin伪等高布局原理的理解。

   html代码：

<div id="doc">
	<div id="main">主内容栏<br>这里是主内容栏有很多内容</div>
	<div id="aside">侧边栏</div>
</div>

　　css代码：

#doc {
    overflow: hidden;
    width: 600px;
    margin: auto;
}
#main, #aside {
    margin-bottom: -999px;
    padding-bottom: 999px;
}

#main {
    float: left;
    width: 390px;
    background: #aaa;
}
#aside {
    float: right;
    width: 200px;
    background: #ccc;
}

　　　　实现等高布局的关键是 margin-bottom: -999px;和 padding-bottom: 999px;还有float让两列处在同一行，可以用display:inline-block;vertical-align:top代替；

　　　　这里的负的margin-bottom的作用是让元素的包含块或者相邻的元素的向上移999px,这里是父元素包含块，关于包含块可以看看http://www.w3help.org/zh-cn/kb/008/，讲的很详细了，此时父元素的包含块底边向上移了999px,而上面两个都有padding-botttom:999px所以包含块刚好截取在最高的内容区域处，当内容区域内容变多时就把包含块即父元素内容区域给撑高了而另外一边是自身的高度加上一部分padding，造成了视觉上的等高。而父元素加上overflow:hidden就会把超出包含块的部分隐藏。当主内容区域的content box超过999px+侧边栏的content box的高度就会看到两边不等高了。因为侧边栏预留的padding-bottom已经用完了。

　　　　总结：负margin实现伪等高布局关键在于负的margin-bottom会影响元素的Containing block或者相邻元素，而父元素的内容区域又可以被子元素撑高即改变了包含块的高度，overflow可以隐藏溢出包含块的部分，利用多余留着的padding就可以造成视觉上的等高。以上只是把自己的理解记录下,语言组织的不太通顺，有错误还请多多包涵并指正

参考资料：

包含块：http://www.w3help.org/zh-cn/kb/008/

我知道你不知道的负margin:http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/