CSS布局--overflow:hidden的清除效果

CSS布局–overflow:hidden的清除效果

来自《精通CSS》阅读的思考：

原文使用两列的浮动布局，首先设置两列内容为float，并设置display:inline-block，以此防止IE中双外边距浮动产生的bug，然后在两个浮动元素的父元素应用了overflow:hidden

原文：因为这些元素是浮动的，它们不再在文档流中占据任何空间，这会导致页脚上升。为了避免这种情况，需要对父元素应用溢出方法，从而清理浮动元素。

overflow：hidden 的原义是超出的部分要裁掉隐藏
当父元素的高度没有显式设置，为默认值height:auto，且只包含浮动元素时，由于float元素脱离文档流，他的高度不计算在父元素中，正常的父元素height应该为0，但是在给父元素加上overflow:hidden后，进行裁剪前，父元素会首先计算height: auto;的真实高度，由于其触发了BFC，需要包含子元素，所以高度不是0，而是子元素高度。根据BFC规则浮动元素不仅没有被剪裁掉，还能达到清除浮动的效果。

详细介绍BFC(Block formatting context)的好文:
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html