::after清除浮动最稳妥，因其在父容器末尾插入无内容但具布局行为的伪元素，通过display:table和clear:both触发BFC并撑开高度，不新增DOM、兼容IE8+。
clear: both 单独写在父元素上没用，真正起作用的是让父容器“感知”浮动子项——::after 伪元素是目前最稳妥、无 DOM 污染的闭合方式。
为什么 ::after 必须配 display: table 而不是 block
因为 display: block 在部分老浏览器（如 IE7）中无法触发 BFC，也无法撑开父容器高度；display: table 同时满足两个条件：一是生成块级占位（参与高度计算），二是隐式创建 BFC，让父容器重新包含浮动子项。如果只写 content: "" 和 clear: both，但没设 display，伪元素不占布局空间，清除就失效。
.clearfix::after 的写法细节和常见漏点
-
content: ""必须存在，哪怕为空字符串，否则伪元素根本不渲染 - 必须加在**浮动子元素的直接父容器**上，套多一层（比如外层 wrapper）或少一层（比如加在 body 上）都不生效
- 冒号是两个：
::after，不是:after（后者是旧语法，IE8 支持但现代项目建议用双冒号） - 如果父容器本身有
height或min-height，::after不会覆盖这些显式值——得先检查是否误写了固定高度
什么时候不能用 ::after 清除浮动
当父容器已经设置了 display: flex 或 display: grid 时，::after 无效。这两种布局模式天然脱离浮动影响机制，伪元素的 clear: both 在 flex/grid 容器里被忽略。此时要么删掉 float 改用 justify-content 或 grid-column 对齐，要么把浮动逻辑移到子项内部（不推荐）。另外，若父容器用了 transform、filter 或 will-change，可能意外触发新层叠上下文或格式化上下文，导致 ::after 行为异常，需单独验证。
调试时看不到 ::after 怎么办
Chrome DevTools 默认不显示伪元素，需手动勾选 “Show user agent shadow DOM” 才能在 Elements 面板里看到它；更常用的方法是在 Styles 面板里展开对应选择器，手动查找 ::after 块。如果样式面板里压根没出现 ::after，大概率是 class 名拼错、CSS 文件没加载，或者父元素被其他规则（比如 display: none）屏蔽了渲染。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：清除浮动不是“修复 bug”，而是对浮动行为的主动承接——你得清楚自己为什么还在用 float；如果只是为了左/右对齐，flex 或 grid 更可控；如果只是文字环绕图片，float 仍是语义最准的选择，这时 ::after 就是必要配套。
