::after能清除浮动是因为它插入一个无内容但具渲染行为的伪元素，通过clear: both使其下移至浮动元素下方，从而撑开父容器高度；标准写法为.clearfix::after{content:””;display:table;clear:both}。
为什么 ::after 能清除浮动
因为浮动元素会脱离文档流，导致父容器高度塌陷；而 ::after 伪元素可以插入一个“看不见但有渲染行为”的子节点，并通过设置 clear: both 强制它下移到浮动元素下方，从而撑开父容器高度。
::after 清除浮动的标准写法
最常用、兼容性最好的写法是给浮动容器添加一个类（如 .clearfix），并在其上定义 ::after 伪元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点说明：
-
content: ""是必需的——没有内容，伪元素不会被渲染 -
display: table（或block）让伪元素成为块级框，才能响应clear -
clear: both表示该元素不能和左右任何浮动元素在同一行，必须换行到底部 - 不用
display: inline-block或float，否则可能引入新的布局干扰
为什么不用 display: block 而用 display: table
早期为兼容 IE6/7，display: table 更稳妥；它生成匿名表格框，天然具备“块级+自撑开+不触发 hasLayout 问题”的特性。现代浏览器中 display: block 也完全可用，但要注意：
