::after是清除浮动最常用的方案，因其不污染HTML结构、不增加DOM节点且兼容性好；它通过在父元素末尾插入块级伪元素并触发BFC或清除浮动来撑开容器。
为什么 ::after 是清除浮动最常用的方案
因为它是唯一不污染 HTML 结构、不引入额外 DOM 节点、且浏览器兼容性足够好的纯 CSS 解法。浮动元素脱离文档流后，父容器高度塌陷，::after 在父元素末尾“虚拟插入”一个块级内容，并触发 BFC 或清空浮动上下文，从而撑开父容器。
它不是万能的，但比 clear: both 单独加在空 <div> 上更干净，也比给父元素设 overflow: hidden 更可控（后者会意外裁剪 position: absolute 子元素或阴影）。
::after 清除浮动的标准写法与关键参数
核心是三要素：伪元素必须是块级、必须有内容（哪怕为空字符串）、必须触发清除行为。缺一不可，否则无效。
-
content: ""—— 必须显式声明，不能省略，否则伪元素不渲染 -
display: table或display: block——table更稳妥，能天然形成 BFC，避免 margin 合并问题；block配合clear: both也可用，但需注意父容器是否已有 BFC -
clear: both—— 仅在display: block时必需；若用display: table，可省略，因 table 自带清除效果
推荐写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
容易被忽略的兼容性与性能细节
IE8+ 支持 ::after，但 IE8 不支持双冒号语法，只认 :after；如果项目还要兼容 IE8，得写成 :after，或同时写两遍（:after 和 ::after），后者会被现代浏览器覆盖，不影响。
立即学习“前端免费学习笔记（深入）”；
性能上几乎无负担，但要注意：伪元素仍参与渲染树构建，若在大量列表项（如商品卡片）的每个父容器上滥用 .clearfix，可能略微增加样式计算量；此时应优先考虑 Flex 或 Grid 布局替代浮动，而非硬套清除方案。
另一个坑：content: " "（空格）比 content: "" 多一个空白字符，可能引发不可见的行高或基线偏移，务必用空字符串。
什么情况下不该用 ::after 清浮动
当父容器本身已经是 BFC 容器时，比如设置了 display: flex、display: grid、overflow: auto（非 visible）、float 自身或 position: absolute/fixed，浮动子元素不会导致其高度塌陷，此时加 ::after 属于冗余操作，甚至可能干扰布局逻辑。
还有就是使用 CSS-in-JS 或组件库（如 Ant Design、Element Plus）时，很多封装好的栅格/卡片组件内部已处理好浮动或改用 Flex，强行加 clearfix 可能和原有样式冲突，先看源码或 DevTools 计算后的 height 是否真为 0。
真正需要它的场景其实越来越窄：老项目维护、特定图文混排、或必须兼容极旧浏览器的嵌入式模块。
