display: flow-root 是最干净的现代清除浮动方案，它原生触发BFC且不生成伪元素；仅在需兼容IE8/9、CSS-in-JS动态注入或父容器overflow: visible不可改时才需保留::after Clearfix。
为什么 ::after 清除浮动在现代浏览器里可能白干了
多数项目还在用带 ::after 的 Clearfix（比如 content: "" + display: table），但只要父容器没触发 BFC，它才真正起作用；一旦用了 display: flow-root 或 overflow: hidden 这类原生 BFC 触发方式，::after 就纯属冗余——浏览器仍会生成伪元素、计算布局、触发重排，哪怕它啥也不干。
-
display: flow-root是最干净的替代，所有现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+）都支持，且不产生伪元素 - 如果必须兼容 IE，
overflow: hidden比传统 Clearfix 更轻量，但要注意它会裁剪position: absolute子元素超出部分 - 用
float布局本身已是过时模式，优先考虑flex或grid，它们天然不需清除浮动
Clearfix 的伪元素为啥拖慢渲染
每个 ::after 都是真实 DOM 节点（虽不可见），会参与样式计算、布局树构建和绘制层合成。当页面有几十个浮动容器时，这些“隐形节点”叠加起来，会明显抬高首屏渲染耗时，尤其在低端安卓 WebView 中更敏感。
- DevTools 的
Layers面板能看到大量Generated Content图层，就是它们 -
getComputedStyle(el, '::after')返回非空对象，说明浏览器确实在维护该伪元素状态 - 移除
::after后，Lighthouse 的Render Blocking Resources评分通常会上升 2–5 分
哪些场景还不得不保留 Clearfix
只有三类情况绕不开：需要兼容 IE8/9 的遗留系统、CSS-in-JS 库（如 Emotion）动态注入样式导致 flow-root 不生效、或父容器本身设置了 overflow: visible 且不能改（比如某些 UI 组件库的 slot 容器）。
- 若必须用，把 Clearfix 抽成单个 CSS 类（如
.cf），避免重复声明content和display - 禁用
zoom: 1（IE 专有 hack），它会强制触发 hasLayout，干扰现代浏览器的渲染路径 - 不要在
:root或全局*上应用 Clearfix，伪元素会污染整个文档树
display: flow-root 的两个隐藏限制
它不是万能银弹：不支持设置 align-items（因为不是 flex 容器），也不能像 overflow: auto 那样提供滚动能力。遇到需要同时清浮动+垂直居中+可滚动的容器，得组合方案。
立即学习“前端免费学习笔记（深入）”；
- 垂直居中可用
display: grid; place-items: center替代 - 滚动需求直接上
overflow-y: auto，它本身就能触发 BFC，无需额外清浮动 - 注意 Safari 15.3 及更早版本对
flow-root的contain: layout支持不全，若开启 CSS containment，需降级为overflow: hidden
offsetHeight）这三者叠在一起时，浏览器根本来不及优化。 
