::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 更多用于维护旧代码或特定图文混排场景——真正难的不是写对，而是判断「此刻是否真的需要它」。
