overflow: hidden 不可靠因其会裁剪溢出内容（如下拉菜单、绝对定位提示框），Safari 可能误触滚动条；.clearfix::after 单伪元素常失效因缺 ::before 防 margin-top 合并；现代布局中 flex/grid 已天然避免塌陷，无需 clearfix。
为什么直接给父容器加 overflow: hidden 不可靠
它确实能让父容器“撑开”，但代价是内容溢出时被无声裁剪——比如下拉菜单、position: absolute 的提示框、带负边距的装饰元素，全会被截断。Safari 下还可能意外触发滚动条。overflow: auto 也不保险，尤其在缩放或动态内容场景里容易抖动。这不是“能用就行”，而是埋了定位、交互、视觉三重隐患。
.clearfix::after 单伪元素写法为什么常失效
只靠 ::after 清浮动，漏掉了 ::before 的关键作用：防止父容器和第一个浮动子元素的 margin-top 合并。现象就是父容器顶部“被吸上去”，背景色或边框从页面顶端直接开始，而不是紧贴子元素。标准写法必须双伪元素配合：
.clearfix::before, .clearfix::after { content: ""; display: table; }.clearfix::after { clear: both; }-
display: table比display: block更稳——某些旧版 Chrome 和 Edge 在height: 0下会忽略clear
什么时候根本不用写 .clearfix
现代布局已大幅淘汰浮动作为主布局手段：
- 父容器设了
display: flex或display: grid→ 自动包含子项，.clearfix完全多余 - 父容器已有
overflow: hidden或overflow: auto→ 再加.clearfix不仅无效，还可能因伪元素干扰z-index或动画渲染 - 只用浮动做文字环绕（如
img左右绕排）→ 直接用float: left+shape-outside，无需清浮
复制粘贴后没生效，最可能卡在哪
不是代码错，而是加载链或作用域问题：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件顺序不对：
.clearfix规则必须在所有浮动样式（如float: left）之后加载，否则伪元素被覆盖 - 用 CSS-in-JS 或
css-modules→::after默认被局部作用域隔离，得显式导出或加:global() - Vue/React 中动态加类名 → 别把
class="clearfix"写成内联style，伪元素不支持内联样式 - 父容器本身是
display: inline-block或display: table-cell→ 这些值不触发 BFC，.clearfix无效，得先改显示模式
