伪元素清除浮动时必须加 height: 0 是因为 display: block 的伪元素会继承父级 font-size 和 line-height，导致底部多出空白；单写 height: 0 不保险，需搭配 visibility: hidden、font-size: 0 或 line-height: 0 才能彻底消除干扰。
为什么伪元素清除浮动时必须加 height: 0
因为不加 height: 0，::after 伪元素会凭空撑高父容器——哪怕它 content: ""，默认 display: block 也会继承父级的 font-size 和 line-height，导致底部多出 16–24px 空白。
-
display: block的伪元素有默认行高，不是“透明占位”，而是真实参与布局的块级节点 - 这个高度在 IE7/8、旧版 Safari 或 font-family 不一致时更明显，尤其当父容器用了
font-size: 16px+line-height: 1.5时，计算出的最小高度可能达 24px -
height: 0是压制其“渲染存在感”的最直接方式，但单靠它还不够
height: 0 单独写为什么还不保险
只写 height: 0 无法彻底消除干扰，浏览器仍可能因字体度量或 visibility 行为留下残留空间。
- 必须搭配
visibility: hidden：防止伪元素意外捕获鼠标事件（比如遮挡下拉菜单 hover 区域） - 推荐加上
font-size: 0或line-height: 0：从根源上切断由字体引发的隐式高度（IE7/8 尤其敏感） - 如果父容器本身设了
overflow: hidden，伪元素即使height: 0也可能被裁掉，导致clear: both失效
现代写法为什么可以不用 height: 0
用 display: table 替代 display: block 后，height: 0 就不是必需项了——因为 table 元素天然不继承 line-height，也不会凭空撑高。
-
.clearfix::after { content: ""; display: table; clear: both; }一行就够，语义干净 - 它比
block更早触发 BFC，在 IE8+ 中行为稳定，且无需额外 hack - 但注意：
display: table在 IE7 及更早版本不支持，老项目仍需回退到zoom: 1+height: 0组合
clear: both 失效的真正原因往往不是 height: 0 没写
调试时发现清除无效，大概率不是伪元素没写 height: 0，而是以下更隐蔽的问题。
- 父容器设置了
height: 0、min-height: 0或overflow: hidden，直接压制了伪元素的布局作用 - 浮动子元素用了
position: absolute或display: none，它们根本不在文档流里，clear对它们不起作用 - 伪元素被其他样式覆盖，比如
.clearfix::after { display: none; }，或content值为空字符串但拼写错误（如content: " "多了个空格）
真正该盯住的是 DevTools 里 ::after 节点是否存在、computed 面板中 display 和 content 是否生效——而不是一上来就补 height: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
