flex布局天然不塌陷，因其子项不脱离文档流且容器默认触发bfc，父容器能自动计算高度；而float元素脱离文档流导致父容器无法感知子项高度，必须用clear等hack补救，但这些在flex中无效且可能引发裁剪等问题。
Flex布局为什么天然不塌陷，而Float必须清除
因为Float元素脱离文档流，父容器根本“看不见”子项高度；Flex容器默认触发BFC，子项尺寸变化会自动参与父容器高度计算。clear在Flex容器里完全无效，写了等于白写。常见错误是给display: flex父容器加.clearfix类或overflow: hidden，结果反而裁剪弹出菜单、tooltip等绝对定位内容。
什么情况下Float反而更合适
不是所有场景都该切Flex——硬切容易出问题：
- 新闻正文内图片需文字环绕：
float: left仍是唯一原生支持流式包裹的方案 - 必须兼容IE8–IE9的老系统：
display: flex在这些版本中基本不可用 - 只允许改CSS、不能动HTML结构的后台页面：用
::after { clear: both }补救高度塌陷仍是最快路径
Flex性能优势靠什么，又容易在哪翻车
Flex快不是因为“技术新”，而是主轴计算被浏览器深度优化、重排更少——但前提是别乱设属性：
- 漏写
min-width: 0时，含长文本或图片的子项会撑破容器，触发横向滚动+重排 -
flex-wrap: wrap不显式声明，小屏下所有子项强行挤在一行，直接溢出 - 子项残留
float: left：浏览器先执行float再套flex，结果不可控，常需强制offsetHeight读取才能回正 - IE11中只写
flex: 1不生效，必须补-ms-flex: 1，否则退化为块级堆叠
混合使用Float和Flex是最危险的操作
同一容器里既设display: flex又给子项加float: left，会导致所有flex-grow、order、align-self全部失效。更隐蔽的是全局* { float: left }或第三方UI库偷偷注入的浮动规则，会让新写的Flex布局莫名其妙不生效——这种隐式污染比语法错误更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
