.clearfix::after必须写content: ""，因其是伪元素渲染前提；搭配display: table和clear: both才能可靠清除浮动，三者缺一不可。
直接用 .clearfix::after 是目前最干净、不污染 HTML 的方案，但写错任意一个关键属性就会失效——content: ""、display: table、clear: both 缺一不可。
为什么 .clearfix::after 必须写 content: ""
伪元素不会渲染，除非 content 存在且非空。漏掉这行，整个清除逻辑就形同虚设。
-
content: none或完全省略 → 伪元素根本不生成，父容器照常塌陷 -
content: " "（空格）→ 可能引入不可见空白，影响行高或对齐 -
content: ""是唯一安全、无副作用的选择
display: table 比 display: block 更稳的三个原因
尤其在 IE8 或嵌套较深的布局中，display: block + clear: both 有时会多出 1px 高度、忽略清除，或意外继承 line-height；display: table 天然创建匿名 BFC 容器，更可靠。
- 不继承父级
line-height，避免高度异常 - 不触发外边距合并（margin collapse），减少意外间距
- 比
display: inline-block稳定——后者受 HTML 空白符影响，可能产生间隙
哪些场景下 .clearfix::after 会悄悄失效
不是代码写错了，而是上下文干扰了 BFC 生效逻辑。常见真凶包括：
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
transform、filter或will-change：创建新层叠上下文后，clear: both可能被隔离 - 父容器是
position: absolute且未设宽高：伪元素无法正确计算尺寸 - 子元素用了
float+margin-top: -20px：负边距与clear: both交互异常，优先改用margin-bottom - 在 CSS-in-JS 或 Shadow DOM 中：
.clearfix::after作用域受限，根本没注入到目标容器内
真正复杂的地方从来不是怎么写 ::after，而是判断「这个浮动是不是本就不该存在」——多数时候，删掉 float 改用 display: flex，比修清除逻辑更省事。
