必须清除浮动仅当浮动导致父容器高度塌陷并影响布局时；现代推荐用display: flow-root触发bfc，既安全又简洁，而flex布局虽可替代多数场景但无法实现文字绕图等float特有功能。
什么时候必须清除浮动
只有当浮动导致父容器高度塌陷、影响后续布局时，才需要清除浮动。这不是“用了float就要清”，而是“塌了才要救”。
- 典型现象：
.parent背景色/边框消失、下方元素上移盖住浮动块、margin-bottom失效 - 常见场景：遗留系统维护（HTML结构锁死，只能靠CSS补）、图文混排中
img左浮+文字环绕，但父article需撑高显示底边线 - 注意：用
overflow: hidden清除虽快，但会意外裁剪position: absolute子元素（比如下拉菜单、tooltip） - 推荐标准写法：
.clearfix::after必须带display: table，仅display: block在部分旧浏览器中不触发BFC，清除可能无效
flex布局能否直接替代float
能替代大部分多列布局需求，但不是“一换就完事”——主轴方向、换行逻辑、对齐控制都得重想。
-
display: flex后子项不再脱标，所以父容器天然有高度，无需清除 - 但默认
flex-wrap: nowrap，若子项总宽超容器，会强行挤压而非换行；浮动天然换行，flex必须显式加flex-wrap: wrap - 对齐方式彻底改变：float靠自身
float: left“推”别人，flex靠容器统一控justify-content和align-items - 响应式时，
flex-direction: column可一键切为竖排，但浮动做不到这点——它没有“容器级方向切换”概念
哪些地方float仍不可替代
不是技术落后，而是语义和能力边界决定的：flex解决不了“文字绕图”和“形状外轮廓排版”。
- 图文混排：新闻正文里
img设float: left，段落文字自动环绕——这是float的原始设计目的，flex容器内无法实现这种流式环绕 - 高级排版：
shape-outside配合float可让文字绕任意SVG路径，flex完全不支持此行为 - 极简位移动画：用
float+transition做轻量滑入，不触发layout重排；而flex项目位置变化常伴随尺寸重计算，动画更重 - 兼容IE8及更早版本：若项目强制要求支持，float仍是唯一可靠选择
清除浮动的现代替代方案
与其费劲清除，不如让父容器自己“生成BFC”，从根源避免塌陷。
-
display: flow-root是最干净的替代：一行代码开启新块级格式化上下文，父容器自动包含浮动子项，且不影响子元素定位或溢出行为 - 比
overflow: hidden安全，不会裁剪absolute内容；比::after清爽，不依赖伪元素 - 兼容性已很好：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+均支持；仅需对IE11及以下兜底用
clearfix - 注意：
flow-root不能和flex/grid共存——一旦设了display: flex，flow-root会被覆盖，此时清除已无意义
真正容易被忽略的是：清除浮动从来不是目的，只是应对塌陷的临时手段。当你发现自己反复写.clearfix，该先问一句——这个容器，真的需要用float吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
