::after 在 IE6–7 中完全不工作，因其不识别双冒号语法且缺乏 layout 机制；需用 :after + *zoom: 1 触发 hasLayout 才能清除浮动。
::after 清除浮动本身不支持 IE6–7，必须配合 *zoom: 1 触发 hasLayout 才能生效；现代项目（IE8+）只需标准写法，加 *zoom: 1 反而可能引入兼容性警告。
为什么 ::after 在 IE6–7 里完全不工作？
IE6–7 根本不识别双冒号语法 ::after，只认单冒号 :after；但即使改用 :after，伪元素仍不会渲染——因为旧 IE 缺少“布局（layout）”，父容器无法感知浮动子项高度，clear: both 失效。必须靠 *zoom: 1 强制触发 hasLayout，让父容器“重新计算尺寸”。
.clearfix::after 的标准写法和 IE6–7 补丁
现代浏览器（IE8+、Chrome、Firefox、Safari）用这个就够了：
.clearfix::after {
content: "";
display: table;
clear: both;
}
若真要兼容 IE6–7，必须拆成两部分：
立即学习“前端免费学习笔记（深入）”；
-
.clearfix { *zoom: 1; }——*zoom是 IE6–7 专有 hack，只被它们识别，其他浏览器忽略 -
.clearfix:after（注意是单冒号）—— IE6–7 不支持::after，必须降级写法 -
display: table比display: block更稳：避免 margin 合并，且在 IE8+ 中创建匿名 BFC，撑高更可靠 -
content: ""绝对不能省略引号，写成content: ;或content: none都会让伪元素消失
哪些情况加了 *zoom: 1 也清不掉浮动？
不是所有“加了补丁就万事大吉”。常见失效场景：
- 父容器本身设了
overflow: hidden或float—— 它已形成 BFC 或脱离文档流，::after的清除逻辑被绕过 - 父容器是
display: inline或inline-flex——clear: both只对块级框有效 - CSS-in-JS 或 Shadow DOM 环境中 —— 伪元素作用域受限，
::after根本不注入到真实 DOM - 某处全局写了
*::after { display: none }—— 直接覆盖掉你的清除规则
现代项目里要不要保留 IE6–7 兼容写法？
2026 年绝大多数生产环境已放弃 IE6–7。如果项目目标浏览器是 IE8+，*zoom: 1 和 :after 写法都该删掉，只留 .clearfix::after。强行保留不仅增加维护成本，CSS 验证器还会报 warning，某些构建工具（如 PostCSS 插件）甚至会自动剔除 *zoom。真正容易被忽略的是：你写的 .clearfix 类是否真的用在了浮动元素的**直接父容器**上——嵌套层级错一层，整个清除逻辑就失效了。
