::after能清除浮动是因为它通过content、display:table和clear:both组合触发BFC，使父容器重新包裹浮动子元素；标准写法为.clearfix::after{content:"";display:table;clear:both}，并兼容IE6/7的*zoom:1。
为什么 ::after 能清除浮动
浮动元素会脱离文档流，导致父容器高度塌陷；::after 本身不生成真实 DOM 节点，但配合 clear: both 和 display: table（或 block）可触发 BFC，使父容器重新包裹浮动子元素。
::after 清除浮动的标准写法
最常用、兼容性好（IE8+）的写法是给浮动容器添加一个伪元素，并设置其为块级且清除两侧浮动：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack，触发 hasLayout */
}-
content: ""必须存在，否则伪元素不渲染 -
display: table比block更稳妥：避免外边距合并，且在多数场景下更可靠 -
*zoom: 1是针对旧版 IE 的私有 hack，现代项目可省略
用 display: block 代替 table 会出什么问题
单纯用 display: block + clear: both 在某些布局中可能失效，尤其当父容器有垂直外边距时：
- 块级伪元素会参与外边距折叠，导致顶部/底部间距异常
- 某些嵌套浮动结构中，
block不一定能强制创建新的块格式化上下文（BFC） -
table值天然不与相邻块合并外边距，且隐式建立 BFC，更稳定
现代替代方案是否还该用 ::after
CSS Grid 和 Flexbox 已成为主流布局方式，它们天然不依赖浮动，因此清除浮动的需求大幅减少。但在维护老项目、处理图文混排或第三方组件时，::after 仍是最快捷可靠的兜底手段。
立即学习“前端免费学习笔记（深入）”；
注意：不要对非浮动容器滥用 .clearfix —— 它会额外插入一个伪元素，无谓增加渲染负担；只在父元素内部确实存在 float: left/right 子项时才启用。
