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 ），这是 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 项内部文本不折行导致容器撑宽 */
}
.item {
flex-shrink: 0; / 某些图标/头像不想被压缩，必须显式关掉 shrink /
flex-basis: auto; / 和 width 冲突时，flex-basis 优先级更高，别混用 /
}

还有个隐形陷阱：flex 容器的 font-size: 0 清除间隙法在 flex 中无效——间隙来自 HTML 空格字符，得用注释、负 margin 或 display: block 子项来处理。