flexbox能无缝替换老式两栏/三栏布局、导航栏、卡片列表、表单行、按钮组等并排对齐场景；但图文环绕、ie8–9兼容、html不可修改时必须保留float。
不能完全替代，但绝大多数布局场景下应该放弃 float。 是否“能替代”不取决于技术能力，而取决于语义是否匹配、兼容性是否允许、以及 HTML 结构是否可控。
哪些情况 flexbox 确实能无缝替换 float
老式两栏/三栏布局、导航栏、卡片列表、表单行、按钮组等“容器内项目并排+对齐”需求，display: flex 是更干净、更可控的方案：
- 原用
float: left并排的子项，统一移除float，父容器加display: flex; flex-direction: row - 原靠
margin-right隔开的浮动项，改用gap（注意 iOS 14.5+ 才支持；旧版需用margin-right+:not(:last-child)） - 原靠
clear: both强制换行或收尾的元素，直接删掉——flex-wrap: wrap才是换行的正确开关 - 原靠
overflow: hidden清浮动？别再写了，它会意外裁剪position: absolute的 tooltip 或下拉菜单
哪些情况必须保留 float
不是 flexbox 不够强，而是 float 在这些场景中语义唯一、行为不可替代：
- 新闻正文内图片
float: left或float: right，让段落文字自动环绕——这是目前唯一原生、无 JS、无额外 wrapper 的流式图文混排方案 - 需要兼容 IE8–IE9 的遗留系统：
display: flex在这些版本中基本无效，float+::after.clearfix仍是唯一可行路径 - 只允许改 CSS、不能动 HTML 的老后台系统：加个
::after清浮动是最快修复高度塌陷的方式，比重构 DOM 成本低得多
容易踩的坑：flex 容器里写 float 或 clear 就等于没写
规范明确要求：只要父元素是 display: flex 或 display: grid，其子元素上的 float 和 clear 会被浏览器强制计算为 none，且不触发任何清除逻辑。
- DevTools 里看到
clear: both被划掉？不是优先级低，是引擎压根没进清除分支 - 在 flex 容器里写
class="item float-left clear-both"，float-left和clear-both都不会生效 - 想让某个 flex item “右对齐”？别试
clear: both，改用margin-left: auto或容器级justify-content: space-between - 老代码残留
float: left？必须显式写float: none到每个子元素上，不能只靠继承或重置父容器
真正难的从来不是“怎么把 float 换成 flex”，而是判断“该不该换”——图文环绕、IE8 兼容、HTML 锁死这三条红线，任踩一条，强行替换就会出问题。而最容易被忽略的，是框架组件内部是否还隐式依赖 float 触发的 BFC；升级后突然塌陷，往往不是 bug，是重构信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
