.clearfix::after失效主因是三条件缺一：content: ""缺失（伪元素不渲染）、display未设为table/block（无法触发清除）、父容器有overflow:hidden等压制属性，或类加错层级。
直接写 .clearfix::after { content: ""; display: table; clear: both; } 就能撑开父容器，但三行缺一不可，漏掉 content: "" 是失效最常见原因。
为什么 .clearfix::after 写了却没效果？
不是浏览器不支持，而是以下任一条件未满足：
-
content: ""被省略、写成content: none或只留空格（如content: " "）→ 伪元素根本不渲染，后续样式全白搭 -
display值不是参与块级布局的类型：写成inline、inline-block或未声明 → 无法触发清除行为 - 父容器自身有
overflow: hidden、auto或scroll→ 这些会压制clear: both的布局效果 -
.clearfix类加在了错误层级：比如套在浮动子项的祖父容器上，而非「直接包裹浮动子项」的父容器
display: table 和 display: block 怎么选？
优先用 display: table，尤其需兼容旧环境时：
-
display: table天然创建 BFC，不继承line-height，避免 IE8/9 下 margin 合并导致高度异常 -
display: block可用，但若父容器有垂直方向 margin，可能因外边距合并让伪元素“看不见”；必须补height: 0; visibility: hidden;才稳定 - 绝对别用
display: flex或display: grid—— 它们会让clear: both失效
哪些地方加了 .clearfix 反而坏事？
它不是万能补丁，强行套用会引入新问题：
立即学习“前端免费学习笔记（深入）”；
- 父容器已设
overflow: hidden或display: flow-root→ 本身就在 BFC 中，再加伪元素冗余，还可能意外裁剪position: absolute的下拉菜单 - 父容器是
display: flex或display: grid→ 浮动在子项中本就失效，clear: both被忽略 - 父容器是
position: absolute或fixed→ 伪元素的clear对脱离文档流的容器无效 - 父容器已设
height或max-height→ 伪元素撑不开显式高度，清除失去意义
真正容易被忽略的点在于：你是不是还在用 float 做整体布局？现代项目应优先用 display: flow-root 替代，一行解决，无伪元素干扰；但若需兼容 IE11 或旧版 Safari，仍得回退到 .clearfix。
