.clearfix必须作用于浮动元素的直接父容器，因其伪元素需位于浮动子元素视觉流末尾才能撑开父容器；IE8+推荐用display:block而非table，避免渲染异常；overflow:hidden虽兼容但会触发BFC导致裁剪等隐蔽问题。
clearfix必须作用于浮动元素的直接父容器
很多人把 .clearfix 类加在布局最外层或某个无关容器上，结果父容器依然塌陷——clear: both 只对伪元素自身生效，而这个伪元素必须生成在浮动子元素的**视觉流末尾**，才能把父容器“撑开”。如果父容器里混有非浮动内容、或浮动元素被 display: none 了，::after 就清不到目标。
常见错误：
• 给 header 或 main 这类语义容器盲目加 .clearfix，但里面根本没浮动元素
• 在 Flex 容器上加 .clearfix，完全多余且可能干扰 flex-wrap
• 把 .clearfix 放在浮动元素的祖父级（比如 wrapper → section → .float-item），中间隔了一层，伪元素无法影响父容器高度计算
IE8+兼容写法只需两行，别加多余 hack
现代项目基本已放弃 IE6–7，所以不用写 :before + *zoom: 1 这套组合。IE8 支持双冒号 ::after，但不识别 display: table 的某些渲染行为，稳妥做法是：
-
display: block比display: table更兼容 IE8，且不会引发旧版 Safari 的行高异常 - 加
height: 0和visibility: hidden，防止伪元素意外占位（尤其当父容器设了font-size: 0时） - 不需要
overflow: hidden或zoom: 1——它们和伪元素方案逻辑冲突，反而可能触发 IE8 的 hasLayout 异常
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
display: table vs display: block 的实际影响
display: table 确实能更自然地触发 BFC，但在 IE8 和部分旧版 Android WebView 中，它会让伪元素继承父容器的 box-sizing 行为异常，导致高度计算偏差；而 display: block 虽然语义稍弱，但渲染更可预测。
真正要注意的是：
• 不要用 font-size: 0 隐藏伪元素——某些 IE 下会连 content: "" 一起忽略
• 别给伪元素设 margin 或 padding，否则会撑开父容器额外空间
• clear: both 必须写在伪元素上，写成 .clearfix { clear: both; } 完全无效，因为 clear 对祖先元素不起作用
为什么 overflow: hidden 不是“兼容性更好”的替代方案
表面上 overflow: hidden 在 IE6+ 都能撑开父容器，但它不是“清除浮动”，而是**意外触发 BFC**。副作用非常隐蔽：
- 裁剪
box-shadow、transform位移后的内容（比如下拉菜单、tooltip） - 遮挡
position: absolute子元素超出父容器的部分 - 在 Safari 14 及更早版本中，可能让
border-radius失效
这些 bug 往往只在特定缩放比例、字体设置或嵌套层级下暴露，比 clearfix 失效更难定位。而 .clearfix::after 的失效表现很明确：父容器高度就是 0，一眼就能发现。
真正容易被忽略的，不是哪段代码能跑通，而是哪段代码会在你加个阴影、换种字体、或者用户开了系统放大镜之后，突然开始出错。
