::after伪元素通过插入块级节点并设置clear:both来清除浮动，需满足display:table/block、clear:both且父元素不能overflow:hidden；标准clearfix写法含::before和::after双伪元素，content不可省略，IE6/7需zoom:1 hack。

为什么 ::after 伪元素能清除浮动

浮动元素会脱离文档流，导致父容器高度塌陷；::after 在父元素末尾插入一个“看不见”的块级子节点，再对其设置 clear: both，就能撑开父容器。关键在于必须同时满足：伪元素设为 display: table 或 display: block、有 clear: both、且父元素不能是 overflow: hidden 等隐藏溢出的值（否则伪元素可能被裁剪）。

clearfix 类的标准写法及必要声明

最稳妥的写法需覆盖 IE8+ 和现代浏览器，核心是避免触发 BFC 的副作用（如影响 margin-collapse），同时确保伪元素真实生效：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

• content: "" 不可省略，否则伪元素不渲染
• 用 display: table 而非 block，兼容 IE8（table 触发 BFC 且不会撑高行高）
• 必须同时定义 ::before 和 ::after，防止顶部外边距合并异常
• 不要给 .clearfix 自身设 height 或 overflow，否则可能掩盖问题

遇到 zoom: 1 是什么情况

这是针对 IE6/7 的 hack 写法，因为它们不支持 ::after 伪元素。当项目还需兼容老 IE 时，标准写法要补上：

.clearfix {
  *zoom: 1; /* IE6/7 only */
}

• *zoom: 1 是 IE6/7 专属 hack，触发 hasLayout 从而让父容器包裹浮动子元素
• 现代项目（IE9+）可直接删掉该行，加了也无害但冗余
• 若用了 PostCSS 或 Autoprefixer，这类 hack 通常会被自动剔除，需确认构建配置

为什么有时加了 clearfix 还没效果

常见原因不是写法错，而是上下文干扰：

立即学习“前端免费学习笔记（深入）”；

• 父元素设置了 overflow: hidden 或 auto，虽能闭合浮动，但会意外裁剪 ::after 生成的内容（尤其当它带 margin 或 border）
• 伪元素被其他 CSS 覆盖，比如全局重置了 *::after { display: none }
• 父元素是 flex 或 grid 容器，浮动本身已失效，clear 失去意义
• 使用了 CSS-in-JS 库（如 Emotion），未正确转义 ::after 或遗漏 content

浮动本身在现代布局中已逐步被 Flexbox 和 Grid 取代，clearfix 更多用于维护旧代码或特定图文混排场景——真正难的不是写对，而是判断「此刻是否真的需要它」。