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