.clearfix::after有效需同时满足content: ""、display: table、clear: both；漏任一条件则伪元素不渲染或清除失效，父容器高度仍塌陷。
直接给父容器加 .clearfix 类就能解决，但必须同时满足三个硬性条件：content: ""、display: table、clear: both；漏掉任意一个，父容器高度照样塌陷。
为什么 .clearfix::after 加了却没效果？
最常见原因是伪元素压根没渲染出来——content: "" 被漏掉、写成 content: none，或只留空格（如 content: " "）。浏览器对伪元素的渲染有硬门槛：没有非空 content，整个 ::after 节点就被忽略，后面所有样式都无效。
其他高频失效场景：
-
.clearfix加在了错误的父级上，比如套在包裹浮动项的祖父级容器，而非「直接包裹浮动子项」的父容器 - 父容器自身设了
overflow: hidden、auto或scroll——这些会压制clear: both的布局效果 - 父容器是
position: absolute或fixed，clear对脱离文档流的容器无效 - 全局样式里写了
*::after { display: none }，直接干掉了所有伪元素
display: table 和 display: block 到底选哪个？
display: table 是更稳妥的选择，尤其当项目需兼容 IE8+ 或旧版 Safari：
立即学习“前端免费学习笔记（深入）”；
- 天然触发 BFC，避免外边距合并（margin collapse）导致伪元素“看不见”
- 不继承
line-height或font-size，不会在 IE8/9 下产生意外间隙 - 不需要额外加
height: 0或visibility: hidden来隐藏
若用 display: block，得补 height: 0; visibility: hidden;，否则某些安卓 WebView 可能渲染出 1px 空隙。绝对不要用 display: flex 或 display: grid——它们会让 clear: both 失效。
.clearfix 必须加在哪一层父容器上？
必须加在「直接包裹浮动子项」的父元素上，多一层或少一层都不行。例如：
<div class="wrapper">
<div class="row">
<div style="float:left"></div>
</div>
</div>
那么 .clearfix 要加在 .row 上，不是 .wrapper。Vue/React 中，不要加在组件根节点（如 <div class="my-component">），而应加在模板里那个明确包裹 v-for 浮动项的 <div>。
嵌套浮动结构（如外层列表 + 内层图文浮动）时，每一级「包含浮动子项」的容器都得单独加 .clearfix。
现代项目还该手动写 .clearfix 吗？
取决于你是否还在用 float 布局：
- 父容器用了
display: flex或display: grid→ 子元素即使写了float: left也基本失效，.clearfix不仅无效，还可能干扰align-items或引发嵌套滚动 - 父容器已设
display: flow-root→ 一行解决，无伪元素干扰，且不裁剪position: absolute下拉菜单 - 项目需兼容 IE11 或旧版 Safari → 仍得回退到
.clearfix
真正容易被忽略的是：很多人在父容器已设 overflow: hidden 或 display: flow-root 的情况下，还硬套 .clearfix，结果反而因 BFC 重叠引发裁剪或定位异常。
