.clearfix::after清除浮动必须同时满足四点：content: ""（确保伪元素渲染）、display: table（创建BFC且稳定）、clear: both（强制换行）、父容器不能有overflow: hidden等压制属性。
为什么直接用 ::after 无法触发 clearfix 效果
单纯给父容器加 ::after 伪元素，但没设置 display: table 或 clear: both，它只是个看不见的空节点，对浮动子元素毫无约束力。clearfix 的核心不是“有伪元素”，而是让这个伪元素参与 BFC 构建并强制换行。
::after 必须配合哪些 CSS 属性才能真正清除浮动
以下四点缺一不可，漏掉任意一个都可能失效：
-
content: ""—— 伪元素必须有内容（哪怕为空字符串），否则不渲染 -
display: table或display: block—— 确保伪元素生成盒模型（table更稳妥，避免某些 IE 下block不触发 BFC） -
clear: both—— 明确要求该元素避开左右浮动流 - 父容器不能设置
overflow: hidden等替代方案（否则会覆盖伪元素作用，且可能裁剪内容）
推荐写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
为什么不用 :after 而坚持用 ::after
::after 是 CSS3 规范写法，明确表示伪元素；:after 是 CSS2 的旧语法，虽然多数浏览器仍兼容，但在现代项目中混用容易引发 lint 报错或未来兼容风险。PostCSS、Tailwind 等工具链默认只识别双冒号语法。
立即学习“前端免费学习笔记（深入）”；
特别注意：IE8 只支持单冒号，但如果你还在支持 IE8，那整个 clearfix 方案本身就要换成更老的 zoom: 1 + :before 组合，而不是依赖 ::after。
实际使用时最容易被忽略的 DOM 结构问题
clearfix 生效的前提是：父容器必须包裹所有浮动子元素，且自身不能是 inline 元素或被 transform/contain 等属性意外隔离出 BFC 上下文。
- 如果父容器是
display: inline-block，::after生成的table盒会脱离文档流，clear 失效 - 如果父容器设置了
contain: layout，它会阻止伪元素影响外部布局，导致清除失败 - 浮动子元素若用了
float: none响应式覆盖，但父容器的 clearfix 类没同步移除，虽无害但属于冗余
验证是否生效最简单的方法：在父容器上临时加 border: 1px solid red，看边框是否包住全部浮动子元素高度——包不住，说明 clearfix 没起作用。
