父容器高度为0是因为浮动元素脱离文档流，导致父容器无法感知子元素高度而塌陷；clearfix通过伪元素::after设置content、display:table和clear:both来清除浮动，ie8以下需加*zoom:1兼容。
为什么父容器高度会变成0
浮动元素脱离文档流，父容器无法感知子元素高度，直接“塌”成一条线。常见于 float: left 或 float: right 布局后，父容器背景、边框消失，后续元素上移——这不是 bug，是 CSS 浮动的原始设计行为。
典型触发场景：ul 里用 float: left 排导航项，nav 高度为 0；或两栏布局中左栏浮动，右栏文字顶到顶部。
clearfix 的核心写法和必须加的属性
现代推荐用伪元素 + clear，而不是老式空标签或 overflow: hidden（后者可能意外裁剪阴影、下拉菜单）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
三个属性缺一不可：
-
content: ""：伪元素必须有内容，否则不渲染 -
display: table（或block）：确保能撑起高度；table更稳妥，兼容 IE8+ -
clear: both：真正清除浮动影响的关键
IE8 及更老浏览器的兼容补丁
IE6/7 不支持 ::after 伪元素，需补充 *zoom: 1 触发 hasLayout：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：*zoom 是 IE 专有 hack，现代项目若已放弃 IE8 以下，可省略；但若还跑在政务、银行内网旧系统上，漏掉它就白写了。
常见错误：只写 zoom: 1（没星号），或写成 zoom: "1"（引号导致失效）。
现代替代方案：什么时候不该用 clearfix
如果只是解决高度塌陷，且项目已支持 Flex 或 Grid，优先用更语义化的方式：
- 父容器设
display: flex，子项自动参与布局，无需清除 - 父容器设
display: grid，同样天然规避浮动塌陷 - 纯图文环绕用
float时，可改用shape-outside+display: flow-root（Chrome 58+、Firefox 53+）
display: flow-root 是最轻量的现代解法，一行生效，无伪元素、无 hack，但 Safari 10.1+ 才支持——上线前务必查 caniuse。
别为了“兼容所有老浏览器”硬套 clearfix，先确认真实用户环境；也别在 Flex 容器里多此一举加 clearfix，它不会报错，但完全没作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
