ie6/7根本不解析::after伪元素，所有基于::after的clearfix写法均无效；ie6完全不支持:after或::after，ie7仅部分支持且需:before、:after与*zoom:1协同才可能生效。
IE6/7根本不解析::after伪元素
所有基于::after的clearfix写法，在IE6/7里压根不会执行——它们只认识单冒号:after，且对伪元素支持极不稳定。你写的.clearfix::after { content: ""; clear: both; }在IE6下等于没写，开发者工具里都看不到该规则被加载。
常见误判是：以为加了*zoom: 1就能“激活”现代写法。其实*zoom只解决hasLayout问题，和伪元素解析无关。真正生效的前提是伪元素本身得被识别出来。
- IE6完全不支持
::after或:after（即使带单冒号） - IE7部分支持
:after，但仅限于某些触发条件下，且常因CSS解析顺序失败 - 所谓“IE7兼容clearfix”，实际依赖的是
:before + :after + *zoom: 1三者协同，缺一不可
clear: both在IE6/7中失效的真正原因
即使你手动插入了<div style="clear:both"></div>，它也可能不生效——不是代码写错了，而是IE6/7对“清除”的判定逻辑更苛刻。
clear: both要求目标元素必须同时满足：块级盒、未浮动、未脱离文档流、DOM位置紧邻前一个浮动兄弟。而IE6/7在这几条上特别敏感：
- 空
<div>若没设<code>height或font-size，可能被渲染引擎忽略（尤其在line-height: 0上下文中） - 浮动元素若被
display: none或父容器visibility: hidden隐藏，IE6/7仍会把它当作“存在”，但clear找不到有效参照 - 祖先元素设了
display: inline，会通过继承链让子元素失去块级盒身份，clear直接静默失效 - 漏掉
content: ""→ 伪元素不创建 → 整个clearfix逻辑失效 - 写了
content: "."再配*zoom: 1→ IE8+不需要，反而增加冗余和验证警告 - 加
visibility: hidden或height: 0→ IE8+不强制要求，但加上更防抖动（尤其缩放或嵌套场景） - 给
display: flex容器加.clearfix→ 控制台无报错，但完全无效 - 父容器设了
max-height或transform→ 即使clearfix写对，也无法撑开高度（浮动子元素已脱离文档流） - 用
display: flow-root替代？→ Safari 15.3及更早、所有IE版本都不支持，兼容性断层明显
IE8+能用::after，但别漏掉content: ""
IE8开始支持双冒号伪元素，但有个硬性前提：content属性不能为none，也不能空缺。写成content: " "（空格）或content: "<p>IE8开始支持双冒号伪元素，但有个硬性前提：<code>content属性不能为none，也不能空缺。写成content: " "（空格）或content: "\00a0"虽能渲染，但可能引入不可见空白字符，导致布局偏移。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
最简且可靠写法只有这一行：.clearfix::after { content: ""; display: table; clear: both; }。其中display: table比display: block更稳妥，避免IE8下默认margin干扰。
现代项目里clearfix加了也白加
如果你的项目用了display: flex或display: grid，给父容器加.clearfix毫无意义——浮动在Flex/Grid容器中被忽略，::after伪元素根本不会参与清除流程。
更隐蔽的问题是：overflow: hidden在flex/grid容器中已不再触发BFC（Chrome 105+/Firefox 110+），所以老式“靠overflow撑高”的做法也会失效。
真正麻烦的从来不是怎么写clearfix，而是确认你是否真在维护一个还跑在IE10以下的老系统——如果不是，删掉它，改用display: flex或display: grid，省心又干净。
