::after能清除浮动而::before不能，是因为清除浮动需在所有浮动子元素之后、父容器闭合前插入块级占位元素并应用clear: both；::before插在内容最前，无浮动可清除，故无效。
::after 能生效，::before 不能——不是语法错，是位置根本不对。
为什么 ::before 插入了却清不了浮动
清除浮动的本质，是在所有浮动子元素“之后”插入一个块级占位元素，并用 clear: both 把它压到浮动区底部，从而撑开父容器高度。而 ::before 永远插在父元素内容的最开头，它前面根本没有浮动元素，clear: both 完全无从作用起。
- 即使写了
.clearfix::before { content: ""; display: block; clear: both; }，伪元素也只会卡在文字或第一个子元素前，对后续浮动毫无约束力 - 浏览器渲染顺序里，
::before属于“内容流起点”，而浮动元素的位置偏移发生在内容流中段，起点无法干预中段之后的布局闭合 - 实际调试时，DevTools 里能看到
::before元素确实生成了，但它高度为 0、不占位、也不触发重排——因为没东西可 clear
::after 的关键位置在哪
::after 不是随便“后面”加个东西，它精确落在「所有正常流子元素渲染完毕后、父容器闭合标签前」这个唯一能兜住浮动尾部的位置。
- 这个位置刚好在浮动元素视觉布局的最末端，
clear: both才有对象可作用 - 它让父容器有了“最后一个参与高度计算的子元素”，哪怕这个子元素
content: ""、height: 0 - 如果父容器本身设置了
display: flex或overflow: auto，那它已是 BFC，::after就失去意义——不是写法错，是前提不存在
三行 CSS 缺一不可，常见漏写点
标准写法：.clearfix::after { content: ""; display: table; clear: both; }。少任何一行，都可能失效。
-
content: ""必须显式写，content: " "（空格）会引入不可见的行高和基线偏移；省略则整个伪元素不生成 -
display: table比display: block更稳妥：天然触发 BFC，避免 margin 合并，且不用依赖clear: both（但加上也无害） - 若用
display: block，clear: both就不可省；若父容器已有 BFC（如display: grid），再加::after可能干扰原有布局逻辑 - IE8 兼容需额外补
.clearfix:after（单冒号），否则伪元素不渲染
现代项目里还该不该用 ::after 清浮动
该用，但得先确认是否真需要浮动——这是最容易被跳过的判断。
- 如果还在用
float: left做栅格或导航栏，::after仍是目前最干净的纯 CSS 解法 - 但如果父容器已设
display: flow-root，一行就能替代整个.clearfix类，且更语义化、无伪元素开销 - 在成百个商品卡片上重复套
.clearfix，样式计算负担虽小，但暴露的是布局设计问题：该换 Flex/Grid 了，而不是优化清除方案 - 组件库（如 Ant Design）内部大多已处理浮动或弃用浮动，硬加
.clearfix可能和display: inline-flex等内联样式冲突
真正容易被忽略的，不是怎么写 ::after，而是没先看一眼父容器是不是已经是个 BFC——很多“清除失败”，其实根本不是伪元素的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
