::after伪元素比overflow:hidden更可靠，因其仅干预浮动流而不裁剪absolute子元素、遮挡阴影或干扰动画；标准写法为.clearfix::after{content:"";display:table;clear:both}。
为什么直接用 ::after 伪元素比 overflow: hidden 更可靠
因为 overflow: hidden 会意外裁剪子元素的 position: absolute 内容、遮罩动画或溢出阴影，而伪元素方案只干预浮动流，不影响布局上下文。实际项目中，一旦遇到下拉菜单被截断、tooltip 显示不全，八成是误用了 overflow 清除浮动。
标准 clearfix 工具类应基于双伪元素（兼容 IE8+）或单 ::after（现代浏览器），推荐后者——简洁、无副作用、可预测：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更稳妥，它能正确继承父容器的 box-sizing 行为，避免某些旧版 Safari 下高度计算偏差。
clear: both 必须作用在伪元素上，不是父容器本身
常见错误是把 clear: both 写在父选择器里，比如 .clearfix { clear: both; }——这根本不起作用，因为 clear 只对**紧邻前一个浮动兄弟元素**生效，而父容器本身没浮动，也不在浮动流中。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：伪元素生成在浮动元素之后，
clear: both才能强制换行 - ❌ 错误：
.clearfix { clear: both; }—— 清除行为无目标，等于没写 - ⚠️ 注意：
::before通常不必要，除非要解决 IE6/7 的“双倍边距”bug，现代项目可省略
要不要加 display: block？看是否需要支持 IE8
IE8 不识别 ::after 伪元素上的 display: table，必须降级为 display: block 并手动设置 height: 0 防止撑开空间：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
但如果你的项目已放弃 IE8 支持（绝大多数情况），直接用 display: table 即可，更轻量、语义更准。
另外，别给伪元素加 font-size: 0 或 line-height: 0——这些是过时的 hack，content: "" + display: table 已足够干净。
工具类命名别用 clearfix，优先选语义化名称
直接叫 clearfix 容易让人误以为这是“唯一正确解”，而实际中很多场景根本不需要它：Flex/Grid 布局天然不浮动，display: flow-root 是更现代的替代方案。
建议按用途命名，降低滥用概率：
-
.flow-root—— 用display: flow-root创建 BFC，无副作用，推荐首选 -
.float-container—— 明确表示“这里用了浮动，需清理”，便于后期重构 -
.legacy-clear—— 标记为遗留方案，提醒团队逐步替换
真正容易被忽略的点是：清除浮动不是目的，而是为了防止父容器高度塌陷；一旦你发现某处反复加 clearfix，该检查是不是该用 display: flex 或 display: grid 重构成非浮动布局了。
