.clearfix::after失效主因是四个属性缺一不可：content: ""（生成伪元素）、display: table（稳定bfc）、clear: both（清除浮动）、height: 0（防空白占位）；漏任一即不渲染或清除失败。
直接用 .clearfix::after 无法生效，大概率是四个关键属性缺了至少一个——content: ""、display: table、clear: both、height: 0，少一个就等于没写。
为什么只写 clear: both 的伪元素不工作
伪元素必须先渲染出来，才能执行清除动作。clear: both 只是“指令”，不是“触发器”。如果漏了 content: ""，浏览器根本不会生成该伪元素盒；如果用了 display: block 而不是 display: table，在旧版 UC 或某些安卓 WebView 中可能因 margin 折叠或行高计算异常导致高度为 0 但清除失效；height: 0 在 iOS 14 以下或 QQ 浏览器旧内核里不显式设为 0，会额外占一行空白高度，撑开容器但破坏布局节奏。
常见错误写法：
.clearfix::after {
clear: both;
}
这行代码实际什么都没做。
display: table 比 display: block 更稳的原因
display: table 隐式触发 BFC，且不参与外边距折叠（margin collapse），对父容器内部排版干扰更小。而 display: block 在 IE6–8 和部分移动端内核中，容易和浮动子项的 margin 相互影响，导致清除后仍有 1–2px 偏移或高度计算不准。
必须同时满足：
-
content: ""—— 生成伪元素盒 -
display: table—— 稳定盒模型，避免 margin 合并 -
clear: both—— 清除左右浮动 -
height: 0—— 防止伪元素自身撑高
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
transform/overflow 混用时 clearfix 失效怎么办
当父容器同时有 transform: translateY(-5px) 和 overflow: visible 时，::after 会被隔离进新的层叠上下文，clear: both 就“感知不到”浮动元素了——开发者工具里能看到伪元素节点，但 computed clear 值是 none。
此时别修伪元素，改换容器自身触发 BFC：
- 优先用
display: flow-root替代.clearfix，一行解决，无副作用，Chrome 58+/Firefox 53+/Safari 15.4+ 全支持 - 若需兼容 IE11，改用
overflow: auto（不是hidden），它既能触发 BFC，又保留溢出可见性 - 把
transform移到子元素上，父容器保持“干净”，::after就能正常工作
移动端 Safari 下 clearfix 点击区域消失的隐蔽原因
iOS 15.4+ 支持 display: flow-root，但老项目仍用 clearfix。若父容器设了 overflow-x: hidden（比如为防横向滚动），Safari 对 clear: both 和 overflow-x 的交互处理特殊——::after 渲染了，但清除逻辑被忽略，父容器高度仍为 0，导致整个区域点击无效。
验证方式：用 getBoundingClientRect() 查父容器高度，接近 0 就是塌陷；用开发者工具检查 ::after 的 computed clear 是否为 both。
真正难调的不是样式本身，而是 box-sizing、DOM 顺序、BFC 触发时机三者耦合——改一个 padding，所有负 margin 和 position 偏移都得重算。现代项目建议直接切 display: grid，点击区域由浏览器原生保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
