因为float使元素脱离文档流，父容器无法感知其高度而塌陷为0，导致背景消失、边框断裂、后续元素上移；清除浮动（如::after{clear:both}）只是补丁，而flex容器天然触发BFC，自动包裹子项、正确撑高。
float 布局为什么总要“清浮动”？
因为 float 的本质是让元素“浮出”标准流——它不参与父容器的高度计算，父容器就直接塌成 0 高。你看到背景色消失、边框断开、后续元素上移，都是这个原因。所谓“清除浮动”，比如 ::after { clear: both } 或 overflow: hidden，全是在打补丁，不是布局能力。
flex 布局怎么做到不用清、不塌陷？
display: flex 容器天然触发 BFC（块级格式化上下文），子项无论是否伸缩、换行、对齐，都会被父容器“感知并包裹”。不需要任何 hack，height: auto 就能正确撑开。
- 垂直居中？一行
align-items: center，不用position + transform猜高度 - 三栏等宽？
flex: 1三份均分，不用算width: 33.333%还要防 margin 折叠 - 内容长短不一却要等高？默认
align-items: stretch，天然拉齐
哪些地方千万别硬用 flex 替换 float？
不是所有 float 都该删。真正该留下的，是它原本就擅长的场景：
- 新闻正文里图片左浮、文字自然绕排——
float: left配合shape-outside是目前唯一原生支持非矩形环绕的方案 - 邮件模板（HTML email）：Outlook Desktop 等客户端基本不认
display: flex，float + table仍是事实标准 - 接手一个满屏
.clearfix的老系统，上线时间紧？局部不动比全局重构更稳
过渡时最容易忽略的 flex 细节
很多人加了 display: flex 就以为完事，结果发现子项不换行、文字撑爆容器、图标被压缩——问题常出在默认行为没控住：
立即学习“前端免费学习笔记（深入）”；
- 要换行必须写
flex-wrap: wrap，否则子项宁可溢出也不折行 - 内部有长文本时，记得给子项加
min-width: 0，否则 flex 会拒绝收缩 - 别在 flex 容器里给子元素设
float：浏览器会先处理 float 再 flex，结果不可控
