必须用 float 而不能用 flex 的场景有三：一是实现文字环绕非矩形图片（需 float + shape-outside）；二是 html 邮件兼容（outlook 等不支持 flex）；三是老系统仅允许改 css 时用 clear 或 overflow 修复塌陷。
什么时候必须用 float 而不能用 flex
只有当需要实现**文字自然环绕非矩形图片**（如圆形、多边形剪裁）时，float 是目前唯一原生支持的方案；其他所谓“必须用 float”的场景，基本是历史包袱或误判。
float: left + shape-outside 是当前唯一可行的图文环绕方案
shape-outside 只对浮动元素生效，Flex 项目完全不支持该属性。如果你要让正文文字绕着一张圆角/椭圆/自定义 SVG 路径的图片流动，就必须用 float: left 或 float: right 配合 shape-outside。
- 示例写法：
.img-wrap { float: left; shape-outside: circle(50%); } - Flex 容器内即使强行加
float，也会被忽略，shape-outside直接失效 - Grid 也不支持
shape-outside，它只认float上下文
邮件模板（HTML email）中 float 是事实标准
Outlook Desktop（尤其是 Windows 版）、Apple Mail 等客户端对 display: flex 支持极差甚至完全忽略，但普遍支持 float 和 table 布局。生成可投递的邮件 HTML 时，float 不是选择，而是约束条件。
- 常见模式：
div套table做结构，img或td内用float: left控制图文并排 - 任何试图在邮件中用 Flex 的尝试，都会在 Outlook 中退化为垂直堆叠或错位
- 工具链（如 MJML）底层仍依赖
float+table输出兼容代码
老系统里无法改 HTML 结构时，float 是唯一可控补救手段
当你接手一个只允许改 CSS 的遗留系统（比如 CMS 模板限制、第三方插件封装），且父容器高度塌陷已影响关键区块渲染，又不能加 wrapper 或改 DOM，此时用 ::after { clear: both } 或 overflow: hidden 是最直接、副作用最小的修复方式。
- Flex 要求你控制父容器的
display，而老系统往往禁止修改 class 层级或结构 -
display: flow-root虽然现代且干净，但在 IE11 及部分旧 WebView 中不支持 - 这种场景下，“必须用 float”其实是“只能靠 float 衍生的清除机制来兜底”，而非布局本身依赖 float
真正容易被忽略的是：这些场景都和“布局主干”无关。一旦涉及导航栏、卡片流、表单对齐、响应式栅格——哪怕只有一处用了 float，后续维护成本就会指数上升。不是 float 不能用，而是它的适用边界比多数人想的窄得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
