display: flow-root 是清除浮动最干净的写法，专为包裹浮动子项而生，无副作用且兼容现代浏览器；它不与 flex/grid 混用，适用于图文环绕等必须用 float 的真实场景。
现代 CSS 布局中，float 已基本退出主布局舞台，display: flex 或 display: grid 是更合理、可控、语义清晰的选择；但“仍需清除浮动”不是因为 flex 不够好，而是某些场景下 float 本身语义正确且不可替代——此时清除是配套动作，不是补救措施。
为什么 display: flex 的父容器里还出现 float 子元素？
这是典型的逻辑矛盾。浏览器会直接忽略 float 声明：只要父容器是 display: flex 或 display: grid，其子项的 float 属性就无效（规范明确要求）。你看到的“似乎生效”，往往是其他样式干扰或误判。
- 检查是否误将
float写在了父容器上（比如float: left），这会让整个 flex 容器脱离文档流，引发连锁错位 - 用开发者工具的“Computed”面板确认
float是否被标记为not applicable - 若真需图文环绕效果（如正文图片左浮、文字绕排），应保留
float，但父容器别用 flex —— 改用display: flow-root或overflow: hidden触发 BFC 即可
display: flow-root 是清除浮动最干净的写法
它专为解决“包含浮动子项”而生，不带副作用，也不影响布局模式。相比 overflow: hidden 可能裁剪 position: absolute 子元素，或 ::after + clear: both 需要额外声明，display: flow-root 更接近“声明意图”而非“打补丁”。
- 兼容性足够：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+，覆盖所有现代主流环境
- 写法极简：
.text-wrapper { display: flow-root; }，后续所有浮动图片自动被包裹，高度正常 - 不要和 flex/grid 混用：给已设
display: flex的容器再加display: flow-root，会导致 flex 失效，子项退化为 block 流
哪些真实场景必须用 float 并配合清除？
不是“还在用 float”，而是“只有 float 能干这事”。这时候清除不是妥协，而是必要闭环。
-
响应式图文环绕：新闻正文内
img左浮动，段落文字自动绕行 ——flex和grid容器内的子项无法触发文本环绕，shape-outside虽可模拟，但兼容性和控制粒度远不如原生float -
遗留系统微调：HTML 结构不可改，只允许加 CSS；此时用
.legacy-section::after { content: ""; display: table; clear: both; }最稳妥，不侵入 DOM，不破坏原有浮动逻辑 -
CSS 动画轻量位移：极少数情况下用
float: left+transition: left实现滑入，比 flex 重排开销低；但需确保父容器已用display: flow-root包裹，否则高度塌陷会暴露动画过程中的空白
真正容易被忽略的点是：清除浮动不是为了“让父容器有高度”，而是为了让父容器参与 BFC 计算 —— 所以关键不在“清”，而在“容”。一旦用了 float，就要想清楚它是否真的服务于内容语义；否则，替换掉它，比费力清除更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
