只需 .clearfix::after { content: ""; display: table; clear: both; } 即可清除浮动，现代浏览器均支持；.clearfix 必须加在浮动元素的直接父容器上，且当父容器已触发 BFC（如 overflow: hidden 或 display: flex）时无需添加。
只用 .clearfix::after 就够了，别加多余属性
2026 年主流项目已无需兼容 IE6–7，zoom: 1、*zoom: 1、height: 0、visibility: hidden 全部可以删掉。它们不解决任何现代问题，只增加维护噪音。
真正起作用的只有三行：
.clearfix::after {
content: "";
display: table;
clear: both;
}
-
content: ""是必须的——没有它，伪元素根本不会渲染 -
display: table比block更稳妥：它自动触发 BFC，且在 inline-level 父容器中不会引发基线对齐间隙 -
clear: both必须写在::after上，写在父元素本身（如.clearfix { clear: both; }）完全无效
为什么不用 display: block？
看起来更直白，但实际埋坑：
- 若父容器是
display: inline-block或font-size: 0等上下文，display: block伪元素会因基线对齐产生意外空白 -
display: table天然无基线、自动触发 BFC、语义上也更贴合“撑开表格行”的行为逻辑 - 所有现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）都支持
display: table于伪元素
加 .clearfix 类时，最容易错的位置
它必须加在**浮动子元素的直接父容器**上，不是祖父、不是 body、不是 wrapper。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<div class="wrapper"><div class="clearfix"><div class="float-left"></div></div></div>——.clearfix加在中间层，但浮动在内层，父容器仍是那个没加类的<div class="clearfix">，有效 <li>正确：<code><div class="clearfix"> <div class="float-left"></div> <div class="float-right"></div> </div> - 如果父容器已有
overflow: hidden或display: flex，再加.clearfix无意义——BFC 已被提前触发，::after不会额外撑高
真要兼容 IE8，只加一行 .clearfix { *zoom: 1; }
IE8 支持 ::after，但需要 hasLayout 才能让父容器包含浮动子项。这时只需补这一行，不要加 zoom: 1（无星号会污染现代浏览器）。
注意：*zoom: 1 是 IE 特有 hack，仅在 IE6–8 解析，其他浏览器忽略。2026 年绝大多数新项目已无需考虑，旧系统维护时才需检查是否漏掉这一行。
最常被忽略的其实是 float 本身——它本就不该用于整体布局。当你反复给十几个容器加 .clearfix，该想的不是怎么写得更短，而是能不能把 float: left 换成 display: flex 或 display: grid。
