应优先使用 display: flow-root，它显式创建 BFC、语义明确、无伪元素和副作用；仅当需兼容 IE6/7 时用 .clearfix::after（含 *zoom:1 和 display:table）；overflow:hidden 要慎防裁剪内容。
直接看项目兼容性要求和维护预期：如果要支持 IE6/7，用 .clearfix::after；如果只跑现代浏览器（Chrome/Firefox/Safari/Edge ≥ 103），优先用 display: flow-root；中间过渡项目，overflow: hidden 可用但得小心裁剪副作用。
什么时候该用 display: flow-root？
这是目前最干净、语义最明确的清除浮动方式，它不依赖伪元素、不触发滚动条、也不意外裁剪内容。
-
display: flow-root显式创建一个 BFC，让父容器重新“感知”浮动子元素高度，且完全不影响视觉表现 - 只在父元素上加一行样式即可，无需额外类名或伪元素定义
- 不兼容 IE 全系和旧版 Edge（≤ 16），在 CanIUse 上显示支持率约 97.5%（2026 年数据）
- 注意：不能和
float、position: absolute或contain冲突使用，否则会降级为display: block
为什么 clearfix::after 还没被淘汰？
因为很多存量项目仍需兼容老浏览器，或团队对 CSS 新特性推进节奏保守。它的核心价值不是“多高级”，而是“稳”。
- 标准写法必须包含
content: ""+display: table（不是block），否则在 IE6/7 下无法触发 hasLayout -
display: table比block更可靠：避免 margin 折叠、兼容旧引擎、不引入额外行盒行为 - 如果项目用了 PostCSS 自动补全，记得确认插件是否保留了
::after的双冒号写法（IE8+ 支持::after，但部分构建工具会转成:after） - 别漏掉
zoom: 1（IE6/7 hack）——虽然现在很少见，但某些政府/金融内网系统仍卡在 IE11 兼容模式下运行
overflow: hidden 要警惕哪些坑？
它见效快，但副作用是隐性的，上线前容易被忽略。
立即学习“前端免费学习笔记（深入）”；
- 任何超出父容器的内容都会被裁剪：阴影（
box-shadow）、下拉菜单、tooltip、绝对定位的提示框，全都可能突然消失 -
overflow: auto看似更安全，但在 Safari 旧版本中可能意外触发横向滚动条（哪怕内容没溢出） - 在 flex 或 grid 容器内部使用时，可能干扰主轴对齐行为，尤其当子元素设置了
align-self: stretch - 如果父元素本身有圆角（
border-radius），overflow: hidden会同时裁剪子元素的圆角渲染，导致视觉断层
真正难的不是选哪个方案，而是判断“这个浮动是不是非用不可”。2026 年多数新项目已转向 flex 或 grid 布局，浮动仅保留在图文环绕等少数场景。如果还在大规模用 float 做多栏布局，先考虑重构比挑清除方式更重要。
