flex容器天然触发bfc，能自动包含子项并正确计算高度，无需clear等补丁；而float使元素脱离文档流，导致父容器高度为0、背景消失、后续内容上移，必须手动清除浮动或触发bfc修复。
Flex容器天然触发BFC，浮动必须手动补救高度塌陷
父容器高度为0、背景色消失、后续内容上移——这些不是bug，是float脱离文档流后的必然结果。浏览器渲染时，浮动元素被“抽离”出标准流，父容器完全感知不到子项存在。clear: both、::after伪元素、overflow: hidden都是事后打补丁，且每种都有副作用：overflow: hidden会裁剪绝对定位的弹层，display: table伪元素可能干扰margin合并。
而display: flex容器默认建立BFC（块级格式化上下文），子项无论是否换行、是否溢出、是否拉伸，父容器都能正确计算高度。你根本不需要写clear，写了也无效——它在flex上下文中直接被忽略。
flex-direction和justify-content控制主轴，float只管“往哪挤”，不管“怎么排”
float本质是单向偏移指令：float: left只是让元素尽可能靠左贴边，不定义容器内其他元素如何响应；它不提供对齐策略，也不处理剩余空间分配。结果就是：两个float: left元素并排，但中间间隙要靠margin硬调，等宽三栏得算width: calc(33.333% - 2px)，稍有误差就换行错乱。
flex则从容器层定义主轴方向与分布逻辑：justify-content: space-between自动均分间隙，flex: 1让子项按比例瓜分剩余空间，flex-wrap: wrap明确告诉浏览器“该换行时就换行”。没有隐式依赖、没有宽度计算陷阱。
-
float渲染机制：先脱离流 → 再逐个放置 → 其他内容绕行 → 父容器失高 → 手动清除 -
flex渲染机制：先建BFC → 再按主轴/交叉轴规则布局 → 子项自动参与尺寸计算 → 高度自然撑开
IE10+可安全用flex，但老项目迁移时float残留会覆盖flex行为
不是加了display: flex就万事大吉。如果子元素还带着float: left，浏览器会优先执行float规则，再套flex排列——结果不可控，常见表现为子项错位、换行失效、对齐异常。
必须显式重置：float: none。尤其在渐进式迁移中，容易漏掉那些藏在全局样式表或第三方组件里的float声明。另外，IE10/11需补-ms-flex: 1，否则flex: 1不生效；而float在IE8–9里反而能跑，这是它仅存的兼容性优势。
图文环绕仍是float唯一原生场景，flex强行模拟反而失语义
新闻正文里img { float: left; margin-right: 12px; }让文字自然绕行，这是CSS唯一原生支持的流式图文混排。flex做不到——它把图片和文字当同级弹性项处理，必须额外包裹、设flex-direction: column、再手动控制基线，破坏HTML语义，且无法配合shape-outside做非矩形环绕。
所以别为了“技术统一”去改这里。真正难的不是“怎么替换”，而是判断“哪里不该替换”：纯文本环绕、邮件模板、无JS兜底的老后台，float仍是合理选择。其他所有布局需求，flex的渲染路径更短、更可预测、更少意外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
