::after能清理浮动是因为它在父元素末尾虚拟插入块级元素并清除浮动，从而撑开父容器；直接对父元素设clear: both无效，因其未参与浮动。
为什么 ::after 能用来清理浮动，而不是直接用 clear: both
因为浮动元素会脱离文档流，导致父容器高度塌陷；::after 是在父元素末尾“虚拟插入”一个块级子元素，再让它清除浮动，从而撑开父容器。直接对父元素设 clear: both 无效——它本身没参与浮动，清除对象不存在。
::after 清浮动的最小必要 CSS 写法
必须同时满足四个条件，缺一不可：
-
content属性不能省略（哪怕只写""），否则伪元素不渲染 - 设为
display: table或block（table更稳妥，避免 IE6/7 下 margin 折叠） - 必须声明
clear: both - 伪元素需作用于浮动元素的**直接父容器**上
/* 推荐写法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}为什么有些项目用 display: block 却失效了
常见于内联上下文或触发了 BFC 的容器中。比如父元素是 inline-block 或设置了 overflow: hidden，此时 display: block 的 ::after 可能被压缩成零高度。改用 display: table 或加 height: 0 显式控制更可靠：
-
display: table自带「建立新 BFC + 不折叠 margin」双重效果 - 若必须用
block，补上height: 0; font-size: 0; line-height: 0;防止意外占位 - 不要依赖
visibility: hidden或opacity: 0隐藏，它们不影响清除行为，但可能干扰可访问性
现代布局下还该用 clearfix 吗
Flex 和 Grid 布局天然不依赖浮动，此时加 clearfix 不仅无用，还可能因强制创建 BFC 导致嵌套滚动、z-index 异常等问题。只有当代码中仍存在 float: left/right 且无法重构时，才应使用：
立即学习“前端免费学习笔记（深入）”；
- 检查是否真有浮动元素（
float值非none） - 确认父容器没有用
display: flex或display: grid - 注意第三方 UI 库（如 Bootstrap 4 的
.row）可能已内置 clearfix，重复添加会导致双倍清除逻辑
真正容易被忽略的是：clearfix 解决的是「高度塌陷」，不是「错位」；如果子元素位置异常，先查 float 是否漏写了 width 或父容器是否意外设置了 white-space: nowrap。
