::after伪元素通过生成块级匿名盒子并设置clear:both可替代空div清除浮动，其本质是让父容器重新包含脱离文档流的子元素，需配合content:""、display:block（或table）及height:0等声明。
直接用 ::after 伪元素加 clear: both 就行，比加空 <div> 标签干净得多，且不破坏语义结构。
为什么 ::after 能替代空标签
浮动导致父容器高度塌陷，本质是子元素脱离文档流后，父容器“感知不到”它们的存在。空标签起作用，是因为它被设为块级、不浮动、并强制清除了左右浮动——::after 同样能生成一个满足这三点的匿名盒子。
-
::after生成的内容默认是行内，必须显式设display: block才能占满整行、触发清除行为 -
content: ""是必需的，哪怕为空字符串；IE6–7 甚至要求内容不能完全为空（如用content: "."更稳妥） -
height: 0; visibility: hidden;是为了不让伪元素撑开额外高度或影响视觉布局 -
clear: both必须写在::after规则里，写在父选择器上无效
.clearfix 类的标准写法与兼容性处理
现代项目可直接用双冒号语法，但若需支持 IE8 及更早版本，得补 *zoom: 1 触发 hasLayout（IE 专有机制）。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
/* IE6–7 兼容 */
.clearfix {
*zoom: 1;
}-
display: table比display: block更稳妥：它既避免了某些浏览器中height: 0失效的问题，又天然具备 BFC 特性 - 不要只写
::after，::before一并声明是为了防止顶部外边距合并（margin collapse） -
*zoom: 1是 IE hack，现代项目可省略；但若还在维护老系统，别漏掉
常见误用：伪元素没生效的几个原因
写了 ::after 却发现浮动还是没清掉，大概率是这几个地方出错了。
立即学习“前端免费学习笔记（深入）”；
- 忘了给父元素加
.clearfix类，只写了样式没挂载到元素上 -
content值为空字符串但没加引号，写成content: ;→ 浏览器忽略整个声明 - 父元素本身设置了
overflow: hidden或float，和伪元素清除逻辑冲突 - 用了单冒号
:after却在严格模式 HTML5 文档中，部分旧版 Safari/IE 可能不识别（推荐统一用::after）
要不要彻底放弃 float 布局
伪元素清除只是“修浮”，不是“治本”。如果项目允许，display: flex 或 display: grid 能从根本上绕过浮动塌陷问题。
-
flex布局下，子项默认不脱离文档流，父容器自动撑高，无需任何清除手段 - 但若要兼容 IE10 及以下，
float+::after仍是可靠组合 - 真正容易被忽略的是：清除浮动只是表象，背后常暴露的是布局模型选择不合理——先想清楚是否真需要浮动
