overflow:hidden及clearfix代码如何阻止含浮动子元素的父元素塌陷？

问题1：overflow:hidden属性是如何阻止包含浮动子元素的父元素发生塌陷的？ #

先得搞明白父元素塌陷的根源：当子元素设置float属性后，它会脱离正常文档流，父元素默认计算高度时只会考虑处于正常流里的内容，完全忽略浮动的子元素，结果就是父元素高度直接“塌”成0（或者只保留非浮动内容的高度）。

那overflow:hidden为啥能解决这个问题？核心是它触发了父元素的BFC（块级格式化上下文）。BFC是CSS里的一套渲染规则，其中有个关键特性：BFC容器会包含内部所有的浮动元素。也就是说，父元素变成BFC后，计算高度时会把浮动子元素的高度也纳入计算范围，自然就不会塌陷了。

顺便提一句：不止overflow:hidden，overflow:auto、overflow:scroll这些值也能触发BFC，效果一样，只是hidden不会出现滚动条，视觉上更干净。

问题2：解析clearfix阻止父元素塌陷的工作原理 #

咱们常说的标准clearfix代码一般是这样的：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* 兼容IE6/7的写法 */
.clearfix {
  *zoom: 1;
}

它的工作原理可以拆成几步来看：

1. 生成伪元素：::after会在添加了.clearfix类的父元素内部最后位置，插入一个虚拟元素。content: ""是必须的，没有它伪元素不会被渲染出来。
2. 设置块级容器：display: table把伪元素变成块级容器，相比display:block，它能避免父元素和伪元素之间的外边距折叠问题，兼容性更稳妥。
3. 清除浮动核心操作：clear: both是关键——这个属性会让伪元素的左右两侧都不允许有浮动元素，所以伪元素会被“挤”到所有浮动子元素的下方。此时父元素计算高度时，会把这个伪元素的位置算进去，相当于把浮动子元素的高度“撑”起来，父元素自然就不会塌陷了。
4. 兼容旧IE：*zoom:1是给IE6和IE7准备的，这俩浏览器不支持伪元素，但zoom:1能触发它们的hasLayout机制，开启hasLayout的元素会自动包含内部浮动子元素，从而解决塌陷问题。

内容的提问来源于stack exchange，提问作者q126y