::after能清除浮动而::before不能，是因为清除浮动需在浮动子元素之后、父容器闭合前插入块级占位元素并应用clear: both；::before插在内容最前，无浮动可清除，故无效。
为什么清除浮动必须用 ::after 而不是 ::before
因为浮动脱离文档流后，父容器高度塌陷，而 ::before 插入在内容最前面，无法撑开底部；::after 插入在内容末尾，配合 clear: both 才能真正“拦住”浮动元素的余势。只用 ::before 清除浮动是无效的，常见错误是误以为两个伪元素都能独立起作用。
.clearfix::after 的最小必要样式是什么
必须同时满足四个条件，缺一不可：
-
content: ""—— 空字符串也行，但不能省略，否则伪元素不渲染 -
display: table或block——table更稳妥，避免 inline 默认行为干扰 -
clear: both—— 真正执行清除动作的关键声明 -
height: 0或font-size: 0—— 防止因默认行高或字体撑开额外高度
典型写法：
.clearfix::after { content: ""; display: table; clear: both; height: 0; }
为什么还要加 .clearfix::before？
它不负责清除浮动，而是解决外边距合并（margin collapse）问题。当父容器第一个子元素有上边距时，该边距会“溢出”到父容器外部，::before 在开头插入一个不可见的块级元素，就能隔断这种合并。它的样式通常极简：
.clearfix::before { content: ""; display: table; } 没有 clear，也不需要 height。
IE8 及更老浏览器的兼容写法要注意什么
IE8 只认单冒号 :before 和 :after，且不支持 display: table。所以完整兼容方案要包含：
- 双写选择器：
.clearfix:before, .clearfix:after - 回退
display值：display: table后补display: block（IE8 会忽略前者） - 触发 hasLayout：
*zoom: 1（IE6/7 专用 hack）
现代项目若已放弃 IE8 支持，可直接用 ::before/::after + display: table，不必加冗余声明。
真正容易被忽略的是：伪元素清除浮动只对「内部浮动子元素」有效；如果浮动元素本身是父容器的兄弟节点，或者浮动发生在伪元素生成之后的动态插入内容里，这个技巧就失效了——这时候得回归结构层面调整，而不是死磕 ::after。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
