flex布局不脱离文档流，float会脱离文档流导致父容器塌陷；flex容器天然形成bfc，子项参与高度计算，无需清浮动，而float需手动处理塌陷、对齐、响应式等问题，现代布局应优先使用flex或grid。
flex布局不脱离文档流，float会脱标导致父容器塌陷
这是最直接、最常踩的坑。float: left 会让元素完全脱离文档流，父容器“看不见”它，height: auto 变成 0；而 display: flex 容器天然形成 BFC，子项仍在流内参与高度计算，无需任何清除手段。
常见错误现象：
- 用
float做导航栏后，底部 footer 突然上移，背景色消失 - 清浮动写成
.clearfix::after { content: ""; display: table; clear: both; }，但忘了给父容器设zoom: 1（IE），或伪元素触发了 margin 合并异常 - JS 动态插入一个
float元素后，整个页面重排卡顿，尤其在低端 Android WebView 中
实操建议：
- 新项目中，所有容器级布局一律禁用
float，改用display: flex或display: grid - 老项目迁移时，先定位哪些地方靠
float撑高父容器——这类场景直接换display: flow-root最轻量，比 flex 更接近原语义 - 若必须保留
float（如邮件模板），确保每个浮动块都显式设width，避免因内容伸缩引发连锁重排
flex能真正控制对齐和换行，float只能靠hack模拟
float 只有 left/right 两个方向，没有垂直对齐、基线对齐、反向排序、等分布局等概念；justify-content、align-items、flex-wrap 是 flex 的原生能力，不是补丁。
使用场景差异：
- 实现“三列等宽+间隙均分”，
float需手动算width和margin，小屏下极易掉行；flex写flex: 1+gap: 1rem即可，响应式只需改flex-direction - 让图标和文字垂直居中对齐，
float得套position: absolute或 JS 测量；display: flex; align-items: center一行搞定 - 长文本卡片在小屏上自动折行？
float会整列错位，flex-wrap: wrap是唯一可靠方案
容易忽略的细节：
-
flex-wrap: wrap必须显式声明，默认是nowrap，溢出也不折，别指望浏览器自动判断 - 含图片或长文本的 flex 项要加
min-width: 0，否则内部内容会撑爆容器，触发不必要的宽度重算 -
gap在 IE11 完全无效，若需兼容，别用margin模拟gap，而应降级为padding+overflow: hidden配合容器内边距控制
flex布局决策集中在容器层，float依赖元素间强耦合
float 的行为是逐个元素计算的：浏览器得反复判断“左边有没有空位”“右边能不能贴住”“下面文字要不要绕行”；flex 把所有布局逻辑收归容器，只做一次主轴计算，子项变化不触发全局重排。
性能影响明显的地方：
- 动态插入/删除 flex 项，只要不改
flex-basis或order，浏览器通常只重绘不重排 - 用
float实现轮播图切换，每次移动都要重排后续所有兄弟元素，滑动卡顿明显 -
float容器里混用position: absolute子项，一旦父容器因塌陷被overflow: hidden修复，绝对定位坐标系可能意外重置，引发 layout thrashing
实操建议：
- 避免在 flex 容器里残留
float声明（哪怕值是none），某些旧版 Safari 仍会先执行 float 排列再套 flex，结果不可控 - 图标、头像类固定尺寸项，显式写
flex-shrink: 0，防止空间不足时被压缩，引发字体回流 - IE10/11 中必须补
-ms-flex前缀，flex: 1不写前缀会退化为flex: 0 1 auto，子项根本不伸缩
float还没死，但它只该干自己本来的事
别把 float 当布局工具用。它至今仍被完整支持，但适用范围已大幅收缩——仅限于图文环绕、老系统兜底、邮件模板、极简脚本注入这几类场景。
真实不可替代的用法：
-
img { float: left; margin-right: 1rem; }—— 这是目前唯一能自然实现非矩形文字环绕（配合shape-outside）的组合 - Outlook Desktop 等邮件客户端几乎不支持 flex，
float+table仍是事实标准 - 接手满屏
float: left+.clearfix的遗留系统，上线时间紧时，局部保留比全量重构更稳妥
最容易被忽略的是：当你在现代项目里看到 float，第一反应不该是“它能用”，而是“它是不是在做本不该它做的事”。比如用它撑开父容器高度、强行模拟栅格、或靠 clear 控制兄弟顺序——这些地方换成 display: flow-root、flex 或 grid，副作用更少，代码也更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
