.clearfix::after无效是因为content: ""缺失、display未设为table、父容器有overflow干扰，且必须加在直接包裹浮动子项的父容器上。
为什么 .clearfix::after 写了却没效果
常见现象是父容器高度仍为 0px，开发者工具里也看不到伪元素渲染。这不是浏览器不支持，而是三个硬性条件缺一不可：
-
content: ""必须显式存在——写成content: none、空着不写，或只写content: " "（带空格）在部分旧环境可能失效 -
display: table不能换成display: block或inline：前者在 IE8+ 更稳，能可靠触发 BFC；后者在某些 Chrome 版本下可能因 margin collapse 导致伪元素“看不见” - 父容器自身不能有
overflow: hidden、auto或scroll：这些会压制clear: both的行为，让清除逻辑静默失效
必须加在哪个父容器上才生效
.clearfix 类不是加在任意外层容器上就能“传染”的。它只对「直接包裹浮动子项」的父容器起作用：
- 如果 HTML 是
<div class="wrapper"><div class="row"><div style="float: left"></div></div></div>，那么.clearfix要加在.row上，不是.wrapper - 嵌套浮动结构中，每一级「直接包含
float子元素」的容器都得单独加——外层加了，内层照样塌陷 - Vue/React 组件中，不要加在组件根节点（如
<div class="my-card">），而应加在模板里那个明确包裹 <code>v-for或map出来的浮动项的<div> 上 <h3> <code>display: flow-root能不能直接替代 clearfix能，但要看兼容性要求：
-
display: flow-root是现代标准解法：一行代码创建 BFC，天然包含浮动子项，无伪元素、无 hack、无裁剪副作用 - 它在 Chrome 58+、Firefox 57+、Safari 15.4+ 支持良好；若项目需兼容 Safari 10–15.3 或 IE11，仍得回退到
.clearfix - 别在已用
display: flex或display: grid的父容器里加.clearfix——此时子元素的float基本失效，::after不参与布局，加了等于白写
IE8 及更老浏览器怎么兜底
如果真实用户环境还跑在政务、银行内网等 IE8 环境中，必须补兼容：
-
*zoom: 1是 IE6–7 的 hasLayout 触发器，必须加在.clearfix类本身上，不能只写zoom: 1（没星号无效），也不能加引号（zoom: "1"失效） - IE8 支持
::after，但要求content显式声明；双冒号语法（::after）在 IE8 中可用，但若要兼容 IE7，得降级为单冒号:after - 现代项目若已放弃 IE8 以下，
*zoom: 1和单冒号写法可全部删掉——留着反而可能干扰 CSS 优先级或引发 lint 报错
::after，得手动勾选 “Show user agent shadow DOM” 才能看到它是否渲染成功；还有人把height或min-height写死在父容器上，直接覆盖了 clearfix 带来的高度计算。 -
