伪元素清除浮动必须用::after且设display:table，content:""不可省略，需加在包含所有浮动子项的父容器上；IE8兼容需用:after和*zoom:1；display:flow-root因Safari旧版本不支持而不推荐替代。
伪元素清除浮动必须用 ::after，不能只写 content: ""
很多人复制了 .clearfix::after { content: ""; clear: both; } 就以为完事了，结果没生效。根本原因是伪元素默认是 display: inline，不参与块级布局，clear: both 对它完全无效。
必须显式设为块级或表格级显示：
-
display: block可行，但可能继承父元素line-height导致额外高度 -
display: table更稳妥——天然创建 BFC，且无行高干扰，是主流方案 - 千万别漏掉
content: ""，否则伪元素根本不生成（哪怕值为空）
::after 必须加在父容器上，不是浮动子元素自己
常见错误是给浮动的 <div class="float-left"></div> 自身加 ::after，这毫无意义。因为 clear 作用对象是“当前元素自身外边距”，它只影响自己是否避开前面的浮动，不改变父容器高度计算逻辑。
正确做法是把伪元素加在**包含所有浮动子项的父容器**上，例如：
立即学习“前端免费学习笔记（深入）”；
.container {
/* 父容器本身不浮动 */
}
.container::after {
content: "";
display: table;
clear: both;
}
这样伪元素作为父容器的最后一个子“内容”，才会迫使父容器延伸高度包裹所有浮动子项。
IE8 兼容要写 :after 而不是 ::after
虽然现代浏览器都支持双冒号语法 ::after，但 IE8 只认单冒号 :after。如果项目还需兼容 IE8，CSS 中得这么写：
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 触发 IE6/7 hasLayout，否则仍塌陷 */
}
*zoom: 1 是 IE6/7 的 hack，对现代浏览器无影响；而 :after 在 IE8+ 和所有现代浏览器中都能工作。
别用 display: flow-root 替代伪元素，除非你查过 caniuse
有人看到 MDN 写 display: flow-root 能自动触发 BFC 包含浮动，就直接替换 clearfix。但它在 Safari 10.1–15.6、iOS Safari 10.3–15.6 中不支持，而这些版本至今仍有可观存量（尤其企业内网环境）。
如果你的项目明确要求支持 Safari ≤15 或 iOS ≤15，display: flow-root 就不能单独使用。伪元素法仍是兼容性最稳的选择。
真正容易被忽略的，是伪元素的 display 值和父容器层级关系——不是写了 ::after 就自动生效，它必须成为父容器“视觉末尾”的块级占位。
