::after能清除浮动是因为它在父容器末尾插入无内容但具块级行为的伪元素，配合clear: both强制下移撑开容器；需content: ""、display: table/block、clear: both三者缺一不可。
为什么 ::after 能清除浮动
浮动元素会脱离文档流，导致父容器高度塌陷；::after 伪元素在父容器末尾插入一个「看不见但有行为」的块级节点，配合 clear: both 可强制它下移至浮动元素下方，从而撑开父容器。关键在于：它不新增 HTML 标签，也不影响语义结构。
clearfix 类的标准写法及必要声明
仅用 ::after 不够，必须同时设置 display: table 或 display: block，并触发 BFC（如通过 zoom: 1 兼容 IE6/7）。现代写法可精简，但以下三点缺一不可：
-
content: ""—— 伪元素必须有内容（哪怕为空）才能渲染 -
display: table或display: block—— 确保能应用clear -
clear: both—— 真正执行清除动作
.clearfix::after {
content: "";
display: table;
clear: both;
}
IE8 及更老浏览器的兼容写法
IE8 不支持 ::after（只认 :after），且需要触发 hasLayout 才能正确撑高。实际项目中若需兼容，应补充单冒号写法和 zoom: 1：
.clearfix::after,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
*zoom: 1 是 IE6/7 的 hack 写法，zoom: 1 在 IE8+ 也生效但无副作用，加星号可避免被其他浏览器解析。
立即学习“前端免费学习笔记（深入）”；
为什么不用 display: block 而用 display: table
用 display: block 也能清除，但会产生额外的上下外边距（margin-top/bottom），尤其在父容器有 font-size: 0 或行高计算异常时易出问题。display: table 天然无 margin，且能规避某些 IE 下的布局抖动。不过要注意：
- 它会让伪元素生成一个匿名 table-cell，不影响布局语义
- 若父容器本身是
display: table，可能引发嵌套 table 行为，此时改用display: block更稳妥 - 现代项目中
display: table是更安全的默认选择
真正容易被忽略的是：伪元素必须作用于浮动元素的**直接父容器**，且该父容器不能是 overflow: hidden 等会裁剪伪元素的场景；否则 ::after 被截断，清除就失效了。
