float在现代开发中已无布局未来，仅剩邮件模板多栏排版和图文环绕两个不可替代场景；display:flow-root是标准清除方案，而迁移本质是思维重构——从“让元素浮起”转向“定义数据流与轴向”。
浮动布局（
）没有“未来”可言——它不再被设计用于现代页面布局，也不再是任何新项目中值得投入学习成本的主干技术。
float 还在哪些地方必须用
只有两个真实、不可替代的场景仍需
：
邮件模板（
等客户端对
/
支持极差，
是目前唯一稳定实现多栏排版的方式）
纯图文流内容中的图片环绕（
或
仍是唯一无需 JS、零兼容性风险、语义清晰的原生方案）
其他所谓“兼容旧浏览器”的理由已基本失效：
在 IE10+、
在 IE11+（通过
前缀）已有可用支持；真正卡在 IE8/9 的项目，通常也受限于整体技术栈，不会靠重写
来延寿。
为什么 display: flow-root 是清除浮动的终点方案
过去用
或伪元素
清除浮动，本质是借副作用“骗过”渲染引擎。它们的问题很实际：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
会意外裁剪下拉菜单、tooltip、动画位移等溢出内容，尤其在移动端滚动时难以定位
伪元素法需额外 CSS 规则，且若父容器本身有
或
，可能触发非预期的滚动条
显式创建 BFC，不改变盒模型行为，不干扰溢出控制，也没有结构侵入性
它不是“更好用的 hack”，而是标准对问题的正式回应——但仅用于兜底老代码，新布局不该以“需要清浮动”为前提来设计。
从 float 到 flex 的迁移不是重写，而是重构思维
直接把
换成
并不能解决根本问题。关键差异在于：
布局依赖 HTML 顺序：右栏必须写在左栏前才能正确右浮；
用
控制视觉顺序，DOM 可保持语义优先
下子项高度不一致会导致“卡住”（float drop），
默认
天然等高
无法响应剩余空间分配，
和
让宽度适配成为声明式行为
迁移时最常被忽略的一点：不要保留
的“浮动后脱离文档流”预期。
容器内的子项仍在格式化上下文中，但不再需要“清除”，也不再有塌陷——这不是功能补丁，而是模型切换。
真正难的不是语法转换，而是放弃用“怎么让这个 div 浮起来”去思考布局；一旦开始问“这个区域的数据流方向是什么？主轴和交叉轴如何定义？哪些项该收缩？哪些该撑满？”，
就自然退场了。
floatfloatOutlookflexgridfloatfloat: leftfloat: rightflexgrid-ms-floatoverflow: hidden::after { clear: both }overflow: hiddenheightmax-heightdisplay: flow-rootfloat: leftdisplay: flexfloatflexorderfloatflexalign-items: stretchfloatflex-growflex-basisfloatflexfloat