最常见原因是伪元素未渲染：漏写content: ""、父容器已触发BFC（如overflow: hidden）、脱离文档流（position: absolute）或全局display: none覆盖；必须同时满足content: ""; display: table; clear: both。
为什么写了 .clearfix::after 却没效果？
最常见原因是伪元素根本没渲染出来：漏掉 content: ""、写成 content: ; 或空格字符串被浏览器忽略；父容器本身已触发 BFC（比如设了 overflow: hidden、display: flow-root），再加 ::after 属于冗余，还可能因层叠上下文隔离导致 clear: both 失效；父容器是 position: absolute 或 fixed，脱离文档流后 clear 对它完全无意义；全局 CSS 里有 *::after { display: none } 这类规则，直接干掉所有伪元素。
.clearfix::after 必须包含哪三行样式？
缺一不可，这是浏览器渲染逻辑的硬门槛：
-
content: ""——必须存在，引号不能省；content: " "也行，但content: ;会彻底失效 -
display: table——比block更稳：自动创建匿名 BFC，不继承line-height，避免 IE8/9 下 margin 合并引发的高度偏差 -
clear: both——必须加在伪元素自身上，不是父容器；它让这个“虚拟块”落到所有浮动元素下方，从而撑开父容器底部
标准写法就是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
老项目还要不要加 *zoom: 1？
2026 年绝大多数老项目已放弃 IE6–7，但如果你确认要支持：
立即学习“前端免费学习笔记（深入）”；
- IE6–7 不识别
::after，只认单冒号:after，且必须配合*zoom: 1触发hasLayout才能生效 - 现代构建工具（如 PostCSS）可能自动剔除
*zoom，或报 warning；若项目已用 Autoprefixer +targets配置明确排除 IE6–7，就该删掉它 - 真正要验证的不是“写了没”，而是打开 IE7 开发者工具，检查元素的
hasLayout属性是否为true
兼容写法示例（仅当真需支持 IE6–7 时保留）：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
哪些场景下 ::after 清除会悄悄失效？
不是代码写得不对，而是上下文悄悄变了：
- 父容器用了
transform、filter或will-change——它们会创建新层叠上下文，有时把::after的clear行为隔离开 - CSS-in-JS 环境（如 styled-components）中，类名被哈希化，
.clearfix选择器匹配失败；改用属性选择器如[data-clear]更可靠 - 父容器是
display: flex或display: grid→ 浮动在这些布局中本就失效，.clearfix完全多余 - 子元素用了
float+margin-top负值，与::after的clear交互异常，优先改用margin-bottom控制间距
真正容易翻车的，从来不是 content 写没写对，而是你没意识到：父容器是否还在文档流里、有没有别的样式在暗中干扰层叠上下文或 BFC 创建时机。
