::after能清除浮动而::before不行，因为清除浮动需在浮动子元素之后插入块级占位元素，::before插在内容最前，无法作用于浮动尾部；::after位于内容流末尾、父容器闭合前，配合content: ""、display: table/block和clear: both方可生效。
为什么::after能清除浮动而::before不行
因为清除浮动需要在所有浮动子元素“之后”插入一个受控的块级占位元素，而::before永远插在内容最前面，根本碰不到浮动流的尾部。浏览器渲染时，浮动元素会向左或右偏移，但它们仍属于父容器的内容流；::after恰好卡在内容流末尾、父容器闭合标签之前这个关键位置，此时插入的伪元素才能被clear: both推到浮动区底部，从而撑开父容器高度。
::after清除浮动必须写的三行CSS
缺一不可，少一行就失效：
-
content: ""——空字符串是硬性要求，content: " "（空格）或直接省略都会导致伪元素不生成 -
display: table或display: block——行内元素不响应clear，必须显式设为块级；table更稳妥，天然触发BFC且避免margin合并 -
clear: both——仅在display: block时必需；若用display: table可省略，但加上也无害
常见错误现象和对应排查点
父容器高度为0、背景色消失、后续元素上移，往往不是::after写错了，而是这些地方漏了：
- 没给父容器加
.clearfix类，或类名拼错（比如写成clear-fix） - 用了
:after但项目已切到现代CSS，却忘了IE8兼容需求——IE8只认单冒号，得补一句.clearfix:after - 父容器本身已是BFC（如设置了
display: flex或overflow: auto），再加::after纯属冗余，还可能干扰原有布局逻辑 - 伪元素被其他样式覆盖，比如父容器有
font-size: 0且未重置伪元素的font-size，极端情况下会影响display: table的基线行为
现代项目里要不要继续用::after清除浮动
如果还在用float做整体布局，::after仍是目前最干净的解法；但更值得花时间检查的是：是否真有必要用浮动？Flex和Grid容器天然形成BFC，flow-root也能一行替代.clearfix。滥用::after在成百个列表项上，会轻微增加样式计算负担——这不是bug，但容易被忽略。
立即学习“前端免费学习笔记（深入）”；
