Float是借位排版，Flex才是原生布局；Float靠脱离文档流实现副作用式布局，需手动修复塌陷，而Flex天然包裹子项、默认等高居中、响应式仅需改flex-direction。
Float是借位排版，Flex才是原生布局
Float 从没打算做布局——它只负责让文字绕着图片走。你用 float: left 把两个 div 并排，其实是“借用”了它的副作用：脱离文档流、触发 BFC。结果就是父容器看不见子元素高度，必须靠 overflow: hidden 或伪元素 ::after { clear: both } 手动补救。这不是布局能力，是修 bug 的权宜之计。
Flex 布局（display: flex）一出生就为布局而生：父容器天然包裹子项、子项默认等高、居中语义明确、伸缩行为可预测。你什么都不设，align-items: stretch 就已让所有子项拉齐高度；加一句 justify-content: center，水平居中就完成了。
高度塌陷 vs 自动包裹：父容器行为完全不同
Float 元素完全脱离标准流 → 父容器高度计算失效。常见错误现象：height: auto 的父容器塌成一条线，内容被遮挡；JS 动态插入一个 float: left 元素后，整个父容器卡住 300ms+。
Flex 容器不脱离文档流，子项尺寸变化时父容器自动重算高度，无需任何 hack。但注意：漏设 min-width: 0 在子项含长文本或图片时，仍可能撑破容器——这是少数需要手动干预的点。
立即学习“前端免费学习笔记（深入）”；
-
float场景下，overflow: hidden在部分 UC 浏览器里会重建裁剪边界，CPU 占用飙升 -
flex场景下，滥用flex-wrap: wrap或align-items: stretch（尤其在子项含 iframe 或 video 时）反而引发重排
响应式切换成本：改一行 vs 改三处
移动端想把两栏横排改成竖排，Float 方案得同时改：float 方向、width 百分比、清除浮动逻辑；Flex 只需改一个属性：flex-direction: column。
子项宽度处理也截然不同：
- Float 要求显式设
width: 33.33%或calc()，内容稍长就错位 - Flex 用
flex: 1，剩余空间自动分配，不依赖具体数值 - Float 下垂直居中只能靠
line-height、position: absolute或 JS 模拟，不可靠；Flex 一行justify-content: center; align-items: center就稳了
混用 Float 和 Flex 会直接破坏弹性上下文
同一容器里既设 display: flex 又给子项加 float: left，会导致所有 flex 相关属性（flex-grow、order、align-self）全部失效——浏览器会忽略 flex，降级回普通块级渲染。
真正容易被忽略的是：某些老项目 CSS 里残留了全局 * { float: left } 或第三方 UI 库偷偷注入了浮动规则，这种隐式污染会让新写的 Flex 布局莫名其妙不生效。
