flex布局无需清除浮动，因其子项不脱离文档流，父容器天然撑高；而float使元素脱标导致塌陷，需clear等补救。flex是原生布局上下文，float仅为图文环绕设计。
Flex 布局本身不产生浮动，所以根本不需要「清除浮动」——用 display: flex 替代 float 后，父容器塌陷、子项换行错乱、垂直对齐困难这些老问题就自动消失了。
为什么 Flex 能绕过 clear 和 clearfix
浮动（float）让元素「脱标」，脱离文档流，导致父容器无法感知高度；而 Flex 是一种**布局上下文（flex formatting context）**，所有直接子元素天然参与弹性布局计算，父容器高度由 flex 项自动撑开，不存在塌陷前提。
-
float: left的元素会“消失”在父容器高度计算中；display: flex的子项哪怕没设flex，也默认参与主轴排列并贡献尺寸 -
clear: both是补救措施；flex-wrap: wrap是主动控制换行逻辑，更可控 - 旧式 clearfix 依赖伪元素或额外 DOM；Flex 一行声明即可，无副作用
替换 float 布局时的关键参数组合
不是简单把 float: left 换成 display: flex 就完事。常见误操作是只改父容器，忘了子项的 flex 行为需要显式定义。
- 父容器必须设
display: flex，且通常要加flex-wrap: wrap（否则子项强行单行挤满，溢出也不换行） - 子项推荐用
flex: 1 1 auto或flex: 0 0 200px控制基础宽度和伸缩性，避免用固定width+float的思维硬套 - 若需等高列，直接生效：Flex 子项默认
align-items: stretch，无需 hack 或min-height - 文字环绕图片？别用 Flex——那是
float: left的原生场景，Flex 不适用
哪些地方还不得不保留 float + clear
不是所有 float 都能被 Flex 安全替代。强行替换反而引入新问题。
- 图文混排：比如段落中一张图左浮动、文字环绕，这是
float的语义本职，flex无法实现这种内联级流式环绕 - 遗留系统维护：老项目里大量
.clearfix和clear: both已深度耦合 JS 逻辑或 CMS 模板，贸然改 Flex 可能触发 DOM 高度计算异常 - IE11 兼容需求：虽然 Flex 支持率已很高，但某些企业内网环境仍要求 IE11，而它的 Flex 实现有诸多 bug（如
flex-wrap不稳定），此时float + clearfix反而是更稳妥的选择
真正要警惕的不是「会不会用 Flex」，而是把 Flex 当万能膏药去覆盖所有浮动场景——尤其当 layout 出现在文本流内部时，float 仍是不可替代的语义化工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
