display: flow-root 是2024年起清除浮动的事实标准，语义明确、无副作用、兼容主流浏览器；fallback 用 .clearfix::after { content: ""; display: table; clear: both }；overflow 和 float 已退居次要地位。
display: flow-root 是现代项目的默认选择
2024年起，display: flow-root 已成为清除浮动事实上的标准方案。它专为解决浮动塌陷而设计，语义明确、无副作用、无需 hack —— 不影响溢出行为，不干扰滚动逻辑，也不需要伪元素或 zoom 兼容处理。
实际用法极简：
.card {
display: flow-root;
}
只要父容器设置了 display: flow-root，内部所有 float: left 或 float: right 的子元素都会被自然包含，高度计算准确，后续标准流元素不受干扰。
注意点：
-
display: flow-root在 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 均已稳定支持；IE 完全不支持，但 2024 年起主流项目基本已放弃 IE 支持 - 它不会像
overflow: hidden那样意外裁剪内容，也不会像float父元素那样把自身也推出文档流 - 如果组件需支持 Safari 14 或更早版本，需搭配
@supports回退
::after 伪元素 clearfix 仍用于兼容旧环境
当项目必须支持 Safari 14、Android WebView 旧版或部分企业内网环境时，.clearfix::after 仍是可靠 fallback。但写法已简化，不再强制要求 zoom: 1 或 visibility: hidden。
推荐最小化写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键细节：
-
display: table比display: block更稳妥 —— 它天然触发 BFC，且在老 Safari 中表现更一致 - 不需要
height: 0或visibility: hidden，空content+display: table已足够隐藏且生效 - 避免用
*zoom: 1：IE6/7 已无实际维护价值，加了反而干扰 CSS 解析器
overflow: hidden / auto 不再推荐作为清除手段
虽然 overflow: hidden 仍能触发 BFC 并“顺便”撑开父高，但它本质是溢出控制属性，不是布局工具。2024 年的典型反例包括：
- 弹出菜单、Tooltip 或下拉列表超出容器时被意外裁剪
- 使用
position: fixed的子元素因父级 BFC 边界限制而错位 -
overflow: auto在移动端可能引发非预期滚动条，干扰 touch 事件流
除非你**同时需要**控制溢出 + 清除浮动，否则不应为清除目的单独设置 overflow。它属于“副作用误用”，容易在后续迭代中暴露问题。
Flexbox/Grid 布局让 float 彻底退场
真正意义上的“最佳实践变化”，其实是不再需要清除浮动 —— 因为越来越多组件直接放弃 float。
例如替代左图右文的经典场景：
- 用
display: flex+align-items: flex-start替代float: left+clear: both - 用
display: grid+grid-template-columns: auto 1fr实现响应式两栏，完全规避浮动语义
浮动现在只保留在两类场景：极简静态页的快速排版（如博客侧边栏）、或 legacy 组件的渐进迁移。新组件开发中，优先选 Flex/Grid，不是“更好”，而是“不产生问题”。
复杂点在于：很多 UI 库仍保留 float 类名（比如 Bootstrap 的 .float-start），但内部已用 Grid 重写了基础布局。别被类名迷惑 —— 关键看实际渲染层是否还依赖浮动流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
