::after能清除浮动是因为它生成的内容位于父容器末尾并触发clear: both，而::before在开头无法约束后续浮动；必须配合content: ""、display: table和clear: both才有效。
为什么::after能清除浮动，而不是::before
因为::after生成的内容默认插入在父容器的末尾，刚好压在浮动元素之后；而::before插在开头，对后续浮动毫无约束力。关键不是“伪元素”本身，而是它所处的位置和触发的clear行为。
必须配合content: ""（空字符串也行，但不能省略），否则伪元素不渲染，clear就无效。另外，display推荐用table或block，避免inline导致clear失效。
::after清除浮动的标准写法与必要参数
最简可靠写法如下，缺一不可：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
content必须存在，哪怕只是""，否则伪元素不创建 -
display: table比block更稳妥——它天然形成BFC，且不会意外撑高父容器（block有时会因margin塌陷带来干扰） -
clear: both必须作用于这个伪元素本身，不是父容器，也不是其他子元素 - 不要加
height: 0或visibility: hidden，这些是过时的“hack”，反而可能破坏布局
为什么加了::after还是没清除？常见失效场景
看似写了，但父容器仍高度塌陷，通常卡在这几个地方：
- 父容器设置了
overflow: hidden或auto——这本身就能触发BFC，清除浮动，此时::after成了冗余，但若同时存在，一般不冲突；但如果父容器还用了transform或will-change，可能意外创建新层叠上下文，干扰clear计算 - 伪元素被
float了（比如误写float: left）——它自己也浮动了，自然无法“挡住”前面的浮动元素 - CSS优先级不够，被其他规则覆盖（比如后面有
.clearfix::after { display: none }） - 父容器是
flex或grid容器——此时浮动本就不该存在，clear完全无效，强行加::after也没意义
要不要给所有父容器都加clearfix类？
不用。只在明确需要包裹浮动子元素、且父容器自身没有触发BFC的场景下才加。现代布局中，浮动本身已退居次要地位：flex、grid、甚至display: flow-root（直接让父容器成为BFC）都是更干净的选择。
display: flow-root一行就能替代整个::after方案，兼容性到Chrome 58+/Firefox 57+，如果项目不需要支持IE或老安卓WebView，优先用它。但若必须兼容IE，::after仍是目前最稳的兜底方案。
真正容易被忽略的是：清除浮动的本质不是“加东西”，而是“让父容器重新参与高度计算”。手段可以换，逻辑不能绕。
