CSS浮动不是被淘汰，而是设计目标与现代布局需求根本错位；它导致父容器高度塌陷、影响邻近行内内容，且与Flex/Grid不兼容，新布局不应将其纳入选型。
它不是“被淘汰”，而是压根就不该出现在现代布局的选型列表里——设计目标和页面需求根本错位。
float 一上，父容器高度就塌陷是必然结果，不是 bug
浮动元素脱离文档流，但又不完全脱离（仍影响邻近行内内容），所以父容器无法感知其存在。你看到背景色消失、footer 上移、border-bottom 不显示，不是漏写了样式，而是模型层面的必然行为。
-
overflow: hidden能“撑开”高度，但会意外裁剪position: absolute的下拉菜单或tooltip -
::after { clear: both }需额外伪元素，且若父容器本身有height或max-height，可能触发非预期滚动条 -
display: flow-root是标准清除方案，但它只该用于兜底老代码，新布局不该以“需要清浮动”为前提来设计
还在 display: flex 容器里写 float: left？这是最危险的混用
这不是“多写一行没影响”，而是会触发不可预测的渲染冲突：浮动元素在 flex 容器中既不参与主轴排列，又可能干扰交叉轴计算，尤其在嵌套结构里，bug 往往藏得深、复现难。
- 浏览器直接忽略
float和clear在flex或grid容器中的声明 - React/Vue 组件的
style或className中主动写float: left，就像在 TypeScript 里手动管理内存——模型层面不兼容 - 所有现代 CSS-in-JS 方案（Emotion、Styled Components）默认禁用
float相关 lint 规则，因为其副作用无法被静态分析捕获
图文环绕和邮件模板仍是 float 不可替代的两个真实场景
其他所谓“兼容旧浏览器”的理由已基本失效：flex 在 IE10+、grid 在 IE11+（通过 -ms- 前缀）已有可用支持；真正卡在 IE8/9 的项目，通常也受限于整体技术栈，不会靠重写 float 来延寿。
立即学习“前端免费学习笔记（深入）”；
- 邮件模板（Outlook 等客户端对
flex/grid支持极差，float是目前唯一稳定实现多栏排版的方式） - 纯图文流内容中的图片环绕（
float: left或float: right仍是唯一无需 JS、零兼容性风险、语义清晰的原生方案）
真正难的不是把 float: left 换成 display: flex，而是放弃用“怎么让这个 div 浮起来”去思考布局；一旦开始问“这个区域的数据流方向是什么？主轴和交叉轴如何定义？哪些项该收缩？哪些该撑满？”，float 就自然退场了。
