flexbox能替代绝大多数浮动布局，因其容器默认触发bfc，天然避免高度塌陷，无需clear；但图文环绕、ie8–9兼容及无法修改html时仍需保留float。
Flexbox 能替代绝大多数浮动布局场景，但不是所有情况都适合直接替换；关键看是否涉及文本环绕、IE8–9兼容或无法修改 HTML 结构。
为什么 Flexbox 天然不用清除浮动
浮动元素脱离文档流，父容器高度塌陷——本质是父容器没形成 BFC。而 display: flex 容器默认触发 BFC，子项无论是否换行、溢出、伸缩，父容器都能正确包裹高度。clear 在 Flex 容器里完全失效，写了也没用。
常见错误是给 Flex 容器加 .clearfix 类或 overflow: hidden，既多余又可能裁剪弹出菜单、tooltip 等绝对定位内容。
Flex 替换 float 时必须重置的三个属性
老代码里残留的 float 会干扰 Flex 排列：浏览器优先处理 float，再套用 flex 规则，结果不可控。
- 显式写
float: none到所有子元素上（不能只靠继承） - IE10/11 中
flex: 1必须补全-ms-flex: 1，否则不伸缩 - 未设
flex-wrap: wrap时，子项强行挤在一行，小屏直接溢出；而 float 天然换行
什么情况下还得用 float + clear
不是所有布局都能被 Flex 接管，硬切反而出问题：
- 新闻正文内图片左/右浮动，让段落文字自动环绕——
float是目前唯一原生支持流式文本包裹的 CSS 方案 - 要兼容 IE8–IE9 的遗留系统，
display: flex在这些版本中基本不可用 - 只允许改 CSS、不能动 HTML 结构的老后台，
::after清除仍是最快修复塌陷的方式
比 Flex 更轻量的现代替代：flow-root
如果只是想解决高度塌陷，又不想引入整套 Flex 布局逻辑，display: flow-root 是更精准的选择。
它显式创建 BFC，让父容器“看见”浮动子元素，且不裁剪溢出内容、不改变子项排列方式。但要注意：
-
display: flow-root和display: flex/display: grid互斥，不能共存 - IE11 及更早版本完全不支持，需用
@supports包裹降级方案 - 若父容器已有
contain: layout，可能与flow-root的 BFC 行为冲突
真正难的不是“怎么替换 float”，而是判断“该不该替换”——多数现代需求里，它早就不该出场了，但别在文字环绕或兼容性红线前强行推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
