伪元素清除浮动时需设height: 0、visibility: hidden及display: table，否则默认块级行为会因line-height/font-size撑高父容器，导致底部空白；现代推荐用display: flow-root替代。
伪元素本身会生成一个“真实”的渲染节点，哪怕 content: ""，只要它被渲染出来，默认就是 display: block，就会占据文档流空间——哪怕内容为空，浏览器仍会按块级元素分配行高、上下 margin 和默认最小高度（尤其在旧版 IE 或某些字体上下文里）。这会导致父容器底部多出一段空白，破坏原有布局间距。
height: 0 是为了压制伪元素的“存在感”
不加 height: 0 的常见后果：
- 父容器底部莫名多出 16–24px 空隙（取决于默认 font-size / line-height）
- 与其他相邻元素的 margin 合并异常，视觉上错位
- 在表单、按钮组等紧凑布局中，这个“看不见的占位”直接导致对齐失败
但只写 height: 0 不够稳妥，还要配合：
-
visibility: hidden：确保伪元素不可见，且不阻断点击穿透（比如下拉菜单 hover 区域） -
font-size: 0或line-height: 0：彻底干掉由字体引发的隐式高度（IE7/8 尤其敏感） - 避免只用
overflow: hidden压高度——它可能意外裁剪子元素的box-shadow或transform溢出部分
现代写法更推荐 display: table 而非 block
老式 display: block + height: 0 在 IE7 下仍有兼容问题；display: table 更可靠：
.clearfix::after {
content: "";
display: table; /* 触发 BFC，且天然无默认行高干扰 */
clear: both;
}
原因很实际：
-
display: table不继承父级line-height，不会凭空撑高 - 它比
block更早触发 BFC，在 IE8+ 中行为一致 - 不需要额外写
height: 0或font-size: 0，语义更干净
真正该警惕的是：clear: both 并不总管用
即使伪元素写对了，clear: both 也可能失效，常见于：
- 父容器设置了
height: 0、min-height: 0或overflow: hidden—— 这些声明会直接压制伪元素的清除效果 - 浮动子元素本身用了
position: absolute或display: none—— 它们根本不在文档流里，clear对它们无效 - 伪元素被其他 CSS 覆盖，比如
.clearfix::after { display: none; }或visibility: hidden写在了错误层级
调试时优先检查：伪元素是否真被渲染出来了（开发者工具里看 ::after 节点是否存在、computed 样式里 display 和 content 是否生效）。
现在大多数新项目其实不该再手动清浮动——display: flow-root 一行解决，不引入伪元素、不干扰布局、不裁剪溢出。但如果你还在维护老代码，或必须兼容 IE11，那 height: 0 就不是可选项，而是防止意外留白的必要防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
