display: flow-root 是更可靠的清浮动方案，它通过创建bfc自动包含浮动子项，无需伪元素且不裁剪溢出；现代浏览器兼容性好，而float布局应被flex/grid替代。
直接加 .clearfix 类不一定有效——它只在父容器正确应用、且没被其他样式覆盖时才起作用。现代项目里，display: flow-root 一行就能解决，比手写伪元素更可靠。
为什么 clearfix 有时不生效
常见失效不是代码写错，而是环境干扰：
- 类名没加到**浮动元素的直接父容器**上（比如加到了祖父级或子元素上）
-
.clearfix::after被其他 CSS 覆盖，例如display: none、visibility: hidden，或父容器设置了height: 0/min-height: 0 - 子元素用了
position: absolute或display: none，它们同样脱离文档流，clearfix对它们无效 - 伪元素漏写了
content: ""—— 没内容，节点就不渲染，clear: both彻底失效
display: flow-root 是更干净的替代方案
它专为解决这个问题而生，不依赖伪元素，也不裁剪溢出内容：
- 只需在父容器上写
display: flow-root，浏览器立刻创建 BFC，自动包含所有浮动子项 - 兼容 Chrome 58+、Firefox 57+、Safari 10.1+、Edge 79+，2026 年绝大多数项目可放心用
- 不会影响
box-shadow、下拉菜单、transform动画等任何溢出行为 - IE 完全不支持，但若需兼容 IE11 及以下，
overflow: hidden是次选（注意裁剪风险）
Flex 和 Grid 布局下根本不用清浮动
一旦父容器设了 display: flex 或 display: grid，浮动就自动失效：
-
float: left在 Flex 容器中被忽略，子元素按flex-direction排列，父容器高度自然撑开 - Grid 同理，浮动子项退化为普通块级元素，
grid-template-rows或grid-auto-rows控制高度 - 混用
float和flex是反模式——比如给flex容器里的子项再设float，行为不可控，调试困难 - 文字环绕图片这类语义场景除外，此时仍需
float+clearfix，不能硬套 Flex
真正容易被忽略的是：清除浮动只是“补救”，不是“设计”。如果还在用 float 做多栏或导航布局，问题迟早会以别的方式冒出来——比如响应式断点错乱、缩放后换行异常。与其反复调 clearfix，不如把 float 替换为 display: grid 或 display: flex，一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
