如何通过CSS Clearfix技术优化性能，避免生成多余伪元素？

本文共计807个文字，预计阅读时间需要4分钟。

许多项目仍在使用带 `::after` 的 Clearfix 来清除浮动。例如，`content:`。

• display: flow-root 是最干净的替代，所有现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+）都支持，且不产生伪元素
• 如果必须兼容 IE，overflow: hidden 比传统 Clearfix 更轻量，但要注意它会裁剪 position: absolute 子元素超出部分
• 用 float 布局本身已是过时模式，优先考虑 flex 或 grid，它们天然不需清除浮动

Clearfix 的伪元素为啥拖慢渲染

每个 ::after 都是真实 DOM 节点（虽不可见），会参与样式计算、布局树构建和绘制层合成。当页面有几十个浮动容器时，这些“隐形节点”叠加起来，会明显抬高首屏渲染耗时，尤其在低端安卓 WebView 中更敏感。