清除浮动

关于overflow:hidden;引发的思考

Posted by lidashuai on 2016-07-30

说说

在看《精通CSS》一书时,发现了一个奇怪的清除浮动方法,就是使用overflow:hidden;应用在父容器上来清除浮动,我就很奇怪了,清除浮动不是clear的事吗?带着这个疑问我去问了问Google大哥,果然不负所望,大概了解了事情的原由。

关于为什么overflow:hidden能清除float的影响?

在知乎上@貘吃馍香有这样一个高票答案:
overflow:hidden;本意是对于超出的部分要进行裁切隐藏,
那么如果float元素不占据普通流的位置,
普通流的包含块要根据内容的高度进行裁切隐藏,
如果高度是默认值auto,
那么不计算其内部的浮动元素就裁切,
就有可能裁掉float元素,显然这是反布局常识的。
所以如果没有明确的设定容器高度的情况下,
它要计算内容的全部高度才能确定在什么高度什么位置进行hidden,
这时浮动的高度就要被计算进去,顺带达成了清理浮动的目标。

包裹性

为了更清楚理解这件事情,张鑫旭的博客给了一个更为全面的总结,按照张对“包裹性”的定义,可以分为主动性包裹(浮动float,绝对定位position:absolute;以及inline-block)和被动性包裹(overflow:hidden和zoom),主动性包裹的标签宽度会收缩至内部元素大小。当把这些元素应用到浮动元素的父容器上时,就会重新计算全部内容的高度(浮动元素也要参与高度计算),从而达到了清除浮动的效果。具体demo懒得测试了,如果有疑问的话,张鑫旭博客给了详细的demo测试和说明。