优先用 display: flow-root，其次用 display: flex 或 display: grid；仅需兼容 IE10 及更早时才用 .clearfix::after，因 flow-root 一行代码创建 BFC、无伪元素、不裁剪溢出、不干扰定位，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持。
直接说结论：优先用 display: flow-root，其次用 display: flex 或 display: grid；只有在必须兼容老浏览器（如 IE10 及更早）时，才考虑 .clearfix::after。
为什么 display: flow-root 是最干净的解法
它不依赖伪元素、不干扰定位、不裁剪溢出内容，一行 CSS 就让父容器重新计算浮动子元素高度——因为它强制创建了一个新的 BFC（块级格式化上下文），而 BFC 的规则明确包含“浮动元素参与高度计算”。
-
overflow: hidden虽然也能触发 BFC，但会意外裁剪position: absolute或transform溢出的内容 -
zoom: 1或display: inline-block会改变盒模型行为，比如破坏margin: 0 auto居中 -
display: flow-root在 Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持，2026 年已无兼容顾虑
.clearfix::after 的实际写法和常见坑
所谓“万能 clearfix”其实有多个变体，但真正稳定可用的只有一种：
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 不用
::before—— 它对清除无效，纯属历史冗余 - 别用
display: block—— 在某些旧版 Safari 下可能漏清，display: table更稳妥 - 不要加
height: 0或visibility: hidden——content: ""本身已不可见，多余声明反而干扰调试 - 给
position: fixed或position: absolute的父容器加.clearfix没意义，它们本就不参与文档流高度计算
用 Flex/Grid 替代 float 才是根治方案
float 本就不是为布局设计的，它的语义是“图文环绕”。现代多列、等高、响应式排版，float 已完全被更可控的方式取代：
立即学习“前端免费学习笔记（深入）”；
-
display: flex：子项默认不换行、自动撑开父容器，flex-wrap: wrap控制折行，无需任何清除逻辑 -
display: grid：用grid-template-columns直接定义列宽，gap控制间距，浮动根本不会出现 - 如果 CMS 输出的 HTML 已含
float类名（如class="col-left"），优先改 CSS 而非硬套.clearfix—— 很多这类 class 实际已被 JS 或后续样式覆盖，加了反而破坏原有逻辑
真正容易被忽略的点是：清除浮动不是目的，避免它才是。只要还在写 float: left 做布局，就说明技术选型卡在了 2010 年。现在该做的，是把 float 当作 legacy 标记来识别和逐步替换，而不是花时间优化它的清除方式。
