flex 布局比 float 更稳，因其天然包含 BFC、避免高度塌陷与清除浮动问题，支持响应式换行、精准对齐和等分布局；但图文环绕、IE9-兼容及无维护压力的遗留代码仍宜保留 float。
flex 布局比 float 更稳，但“稳”不等于“无脑替换”
直接说结论：display: flex 在现代布局中确实比 float 更可控、更可预测，尤其在响应式、对齐、顺序重排等场景。但它不是万能胶——强行把老 float 布局用 flex “套一层”，反而容易出错。关键在于结构语义是否匹配。
float 布局崩坏的典型场景，flex 确实能解
常见崩溃点：父容器高度塌陷、清除浮动失效、多列宽度计算误差、IE 兼容 hack 堆积。这些在 flex 中基本不存在，因为 flex 容器天然包含 BFC，子项默认不脱离文档流，也不依赖 clear 或 overflow: hidden 来撑高。
-
float: left+width: 50%在小屏下换行错乱 → 改用flex-wrap: wrap+flex: 1 1 50%更可靠 - 文字环绕图片后，后续段落被浮动元素影响 → flex 中图片和文字放在同一
display: flex容器里，用align-items: flex-start控制基线即可 - 三栏等宽布局，float 下需处理 margin 负值或 calc() → flex 直接
flex: 1三等分，自动填满剩余空间
哪些 float 场景不该硬切 flex？
不是所有 float 都该被替代。比如纯文本环绕（float: left on <img>），这是 CSS 最原生支持的图文混排方式。强行套 flex 会破坏语义，还需额外包裹、设置 flex-direction: column，反而增加复杂度。
- 仅用于图文环绕的
float，保留即可；flex 不擅长“让内联内容自然绕行” - 需要兼容 IE9 及更早版本时，
float是唯一选择（flex 从 IE10 开始部分支持，且 -ms- 前缀坑极多） - 已有大量基于
float+clear的遗留代码，若无维护成本压力，不建议为“技术正确性”而重构
重建结构时最容易漏掉的 flex 细节
很多人把 display: flex 一加就以为完事，结果发现换行不对、基线错位、缩放失真。真正稳的关键在默认行为控制：
立即学习“前端免费学习笔记（深入）”；
/* 常见遗漏点 */
.container {
display: flex;
flex-wrap: wrap; /* 不写这句，子项宁可溢出也不换行 */
align-items: stretch; /* 默认拉伸，图文混排时可能要改成 flex-start */
min-width: 0; /* 防止 flex 项内部文本不折行导致容器撑宽 */
}
<p>.item {
flex-shrink: 0; /<em> 某些图标/头像不想被压缩，必须显式关掉 shrink </em>/
flex-basis: auto; /<em> 和 width 冲突时，flex-basis 优先级更高，别混用 </em>/
}还有个隐形陷阱：flex 容器的 font-size: 0 清除间隙法在 flex 中无效——间隙来自 HTML 空格字符，得用注释、负 margin 或 display: block 子项来处理。
