只写 .clearfix::after 在 IE8 及更老浏览器中失效，因 IE8 不支持双冒号语法、需用 :after，且 IE6–7 必须配合 *zoom: 1 触发 hasLayout 才能渲染伪元素并清除浮动。
::after 伪元素清除浮动本身不兼容 IE6–7，必须搭配 *zoom: 1 和双伪元素声明才能真正跨浏览器生效。现代项目若无需支持 IE8 以下，可精简为单 ::after + display: flow-root fallback。
为什么只写 .clearfix::after 在 IE8 及更老浏览器里会失效
IE8 支持 ::after，但存在两个关键限制：一是它对 display: block 的 BFC 触发不稳，容易因外边距合并导致高度计算异常；二是缺少 ::before 时，某些旧版 Safari 会折叠父容器顶部 margin。更严重的是，IE6–7 根本不识别双冒号语法，只认单冒号 :after，且必须配合 hasLayout 才能让伪元素参与布局计算。
-
::before不是用来“清浮”的，而是修复旧浏览器中父容器顶部 margin 折叠问题 -
*zoom: 1是 IE6–7 私有属性，唯一可靠触发hasLayout的方式，display: inline-block或height: 1%在部分场景下会失效 - PostCSS 或 Autoprefixer 若配置了
targets: { ie: 8 }，可能自动移除*zoom，需手动检查构建产物
.clearfix::before, .clearfix::after 必须同时设 display: table
用 display: block 看似合理，但在 IE8/9 下会导致匿名表格行生成异常，引发高度偏差或 clear 失效；display: table 能稳定创建 BFC，且不继承 line-height，避免文字基线干扰。注意：content 值不能为空字符串加空格（如 content: " "），IE7 会忽略；必须是 content: "" 或 content: "\0020"。
-
.clearfix::before只需content: ""+display: table，不需要clear -
.clearfix::after必须包含clear: both，且该声明只能作用于伪元素自身，加在父容器上无效 - 全局 CSS 中若有
*::after { display: none }，所有伪元素都会被干掉，调试时先禁用该规则
哪些场景会让 ::after 清浮“悄悄失效”
代码写对了，但效果没出来——大概率是上下文干扰了伪元素的渲染或 clear 行为。常见诱因包括：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
transform、filter或will-change，创建了新层叠上下文，把::after的clear隔离在局部 BFC 内 - CSS-in-JS 环境（如 styled-components）中类名哈希化，
.clearfix选择器匹配失败；应改用属性选择器如[data-clear]或直接内联style="display: flow-root" - 父容器本身已触发 BFC（如
overflow: hidden、display: flow-root），此时再加 clearfix 属于冗余，甚至因层叠上下文嵌套导致 clear 失效 - Vue/React 组件异步渲染浮动内容，但
class="clearfix"在初始 HTML 中就存在，而 DOM 节点尚未挂载，伪元素提前渲染却无浮动可清
现代项目要不要保留 IE6–7 兼容写法
2026 年绝大多数生产环境已放弃 IE6–7，但是否删除 *zoom: 1 不能只看年份，得看真实用户数据。如果监控显示仍有 >0.1% 的 IE7 流量，或系统强制要求适配某政务内网旧版 Trident 内核，就必须保留；否则建议删掉——不仅减少 CSS 体积，还能避免 Autoprefixer 报 warning 或构建工具误剔除。
真正要验证的不是“写了没”，而是打开 IE7 开发者工具，选中元素后检查 hasLayout 属性是否为 true。另外，display: flow-root 虽不能覆盖 IE，但它在 Chrome 64+、Firefox 59+、Safari 15.4+ 中一行解决，且无裁剪副作用，应作为首选；::after 清浮现在本质是兜底手段，不是默认方案。
