float仅在图文环绕中不可替代，因其唯一原生支持文字流自动绕排；Flexbox和Grid为容器布局模型，不参与行盒计算，无法模拟该行为。
不能完全替代，但绝大多数布局场景里，float 已不该出场——它只在图文环绕这一种语义化场景中不可替代。
float 在图文环绕中仍是唯一原生方案
新闻正文里一张 <img> 左浮动、段落文字自动绕行，这是 CSS 唯一原生支持的流式文本包裹行为。Flexbox 和 Grid 都无法模拟：它们是容器布局模型，不参与文本流重排。强行用 position: absolute 或 shape-outside 模拟，会丢失可访问性、破坏打印样式、且在窄屏下极易错位。
-
float: left+margin-right是轻量、语义准确、浏览器兼容性极佳的组合 - 若把带
float的 CMS 内容直接塞进display: grid容器，错乱不是 bug，是模型冲突 - 此时别写
float: none—— 那是在删语义，不是修 bug
flex 容器内保留 float 声明会导致行为不可控
给父元素加了 display: flex，但子项还挂着 float: left，浏览器会优先执行 float 规则，再套 flex 排列。结果常表现为：子项错位、justify-content 失效、换行异常、甚至高度塌陷重现。
- 必须显式重置：
float: none，不能依赖“没写就等于没有” - 第三方组件或全局样式表里漏掉的
float声明，最容易成为调试盲区 - IE10/11 中
flex: 1需补-ms-flex: 1，但float: none不需要前缀，务必写全
display: flow-root 是比 overflow: hidden 更干净的过渡方案
老项目还没法上 Flex，又想解决高度塌陷？别再用 overflow: hidden（会裁剪 position: absolute 弹层）或 ::after { clear: both; display: table; }（触发匿名表格盒，干扰 margin 合并）。display: flow-root 是专为此设计的现代替代：
立即学习“前端免费学习笔记（深入）”；
- 它无副作用地触发 BFC，让父容器正确包裹浮动子项
- 不影响子项的
float行为，图文环绕照常工作 - 配合
container-type: inline-size，还能让容器查询生效——而float父容器在@container中尺寸恒为 0×0
真正难的不是“怎么替换 float”，而是识别它该在哪出现：一旦你开始为导航栏、卡片网格、表单对齐写 float，问题就不是兼容性，是逻辑起点错了。
