现代项目中应优先使用display: flow-root替代.clearfix，因其直接创建BFC根节点以天然包含浮动、自动重算高度，而.clearfix仅适用于IE8遗留系统、强制float的第三方库及图文环绕三类特定场景。
现代项目里绝大多数情况不该写 clearfix 工具类——它不是通用补丁，而是针对特定浮动场景的急救方案。只有当你确认父容器内全是 float 子元素、且无法改用 display: flex 或 display: grid 时，才需要它。
什么时候必须用 .clearfix？
只在三类真实场景中需手动启用：
- 维护仍需支持 IE8 的遗留系统（IE9+ 基本无问题）
- 集成第三方 UI 组件库，其栅格或布局强制依赖
float，且你无法修改源码 - 语义明确的图文环绕（如
img+ 文本段落），且不能用shape-outside或现代流式替代
其他情况——比如父容器已设 display: flex 却还加 .clearfix——不仅无效，还会因插入 ::after 节点干扰对齐或触发意外重排。
.clearfix::after 为什么比 overflow: hidden 更可靠？
overflow: hidden 看似简单，但实际埋雷：
立即学习“前端免费学习笔记（深入）”；
- 会裁剪所有溢出内容：下拉菜单、阴影、
position: absolute元素超出部分全消失 -
overflow: auto在 Safari 14–16 中会无故显示滚动条（即使没溢出） - 它不解决“后续兄弟元素被浮动顶上来”的问题，只撑高父容器
而 .clearfix::after 是精准干预：仅在末尾插入一个空块级节点并清除两侧浮动，不影响任何溢出行为。关键点是 display: table（非 block），它在 IE8+ 都能稳定触发 BFC，比 height: 0; visibility: hidden 更少重排风险。
最简安全的写法与兼容陷阱
以下是最小可用、无副作用的实现（Sass 或纯 CSS 均可）：
@mixin clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
注意几个硬性条件：
-
content: ""必须是空字符串，写成" "（带空格）会在 IE 下渲染空白节点，导致换行和高度异常 - 不要加
*zoom: 1——除非你明确要支持 IE6/7；现代项目加它反而可能干扰 Flex/Grid 容器的 hasLayout 行为 - 不用
::before：虽然某些老资料说它防外边距折叠，但实际只在极少数margin-top场景有用，且增加冗余；现代浏览器下非必需
真正容易被忽略的是：很多团队把 .clearfix 当成“自动修复”全局挂载，结果在 display: grid 容器上也套用，伪元素插入后破坏了网格项顺序，却查不出原因——它从来就不是样式修饰，而是对浮动脱离文档流这一具体问题的定向响应。
