.clearfix::after 无效的三大原因是 content 未设或错误、display 未设为块级、父容器 overflow 干扰；display: table 比 block 更可靠；现代项目优先用 display: flow-root。
父容器高度塌陷不是 bug，是浮动元素脱离文档流后的必然结果；用 .clearfix::after 能解决，但写错一个属性就白加。
为什么 .clearfix::after 加了却没效果
常见现象：加了 class="clearfix"，父容器 offsetHeight 仍是 0，背景色、边框全消失。根本原因只有三个：
-
content: ""被省略、写成content: none或带空格的content: " "→ 伪元素根本不渲染 -
display没设或设成inline→ 伪元素是行内级，clear: both对它无效 - 父容器自身有
overflow: hidden、auto或scroll→ 这些会干扰伪元素的清除行为，导致clear失效
display: table 和 display: block 哪个更可靠
两者都能让伪元素成为块级并参与高度计算，但表现不同：
-
display: table生成匿名表格单元格，天然带清除语义，兼容 IE8+ 更稳，且不会和浮动子项发生 margin collapse 异常 -
display: block更直观，但需额外加height: 0; visibility: hidden;防止占位干扰布局 - 现代项目推荐
display: table—— 它一行生效，无需补丁，clear: both在其上直接起效
现代项目里还该手动写 clearfix 吗
不一定，取决于你是否还在用浮动做布局：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器已设
display: flex或display: grid，浮动子元素自动退化为普通块级元素，.clearfix完全无效且多余 - 如果只是图文环绕（如
img左浮、文字绕排），通常不需要父容器撑高，加.clearfix反而可能意外撑出空白 - 更推荐直接用
display: flow-root：.container { display: flow-root; }—— 它专为此场景设计，创建 BFC 零副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持
嵌套浮动结构必须逐层加 clearfix
伪元素清除只作用于当前父容器，不向上穿透。例如：外层 .list 包着浮动的 .item，而每个 .item 内又有浮动的 .thumb 和 .text —— 那么 .list 和每个 .item 都得加 .clearfix。
真正容易被忽略的是：加完 .clearfix 后，浮动依然存在。它会影响相邻块级元素的 margin 折叠、z-index 层级计算，甚至让 getBoundingClientRect() 返回异常值。修高度只是第一步，得顺手检查周围元素是否表现如预期。
