::after清除浮动失效的根本原因是伪元素默认display: inline，无法触发bfc且不撑高父容器；必须同时满足content非none（如""）和display为block/table/flex等块级显示值。
为什么 ::after 清除浮动经常不生效
根本原因不是伪元素没插入，而是它默认是 display: inline，无法触发 BFC，也无法撑开父容器高度。即使写了 content: ""，若没显式设置 display 类型（比如 block 或 table），它就只是个看不见的内联字符，对布局零影响。
::after 清浮动必须同时满足的两个条件
缺一不可：
-
content值不能为none，通常用""（空字符串）或" "（空格） -
display必须设为能参与块级格式化上下文的值，常见选择有：block、table、flex（注意：inline-block在部分老浏览器中可能不触发清除）
推荐写法与兼容性说明
最稳妥、兼容性最好的方案是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
其中：display: table 能强制创建 BFC，且在 IE8+ 完全支持；clear: both 确保它位于所有浮动子元素下方；content: "" 是必需的触发条件。
立即学习“前端免费学习笔记（深入）”；
不推荐用 display: block 单独搭配 clear: both，因为某些情况下（如父容器有 overflow: hidden 或其他 BFC 触发条件）仍可能失效；display: flex 虽现代，但会改变文档流行为，可能干扰原有布局逻辑。
容易被忽略的细节
清除浮动的伪元素必须作用于**浮动元素的直接父容器**，而不是任意祖先；如果父容器本身也浮动或 position: absolute，::after 就无法正常参与文档流，清除自然失效。
另外，content 值哪怕只多一个空格（如 " "），在部分旧版 Safari 中可能导致伪元素占据额外高度，建议统一用 ""。
