::after清除浮动最干净，但必须写全content: ""、display: table、clear: both三要素；缺content则伪元素不渲染，缺display: table则无法创建bfc撑高容器，缺clear: both则无法下压浮动元素。
直接用 ::after 伪元素清除浮动，是目前最干净、无 DOM 污染的方案——但必须写对三要素：content、display、clear，缺一不可。
为什么 ::after 必须写 content: ""
伪元素不会渲染，除非 content 属性存在且非空值（哪怕只是空字符串）。漏掉这行，整个 ::after 就像没写一样，父容器依然塌陷。
-
content: none或完全省略 → 伪元素不生成，清除失效 -
content: " "（空格）→ 可能引入不可见空白，影响行高或对齐 -
content: ""是唯一安全、无副作用的选择
display: table 比 display: block 更稳的原因
旧版浏览器（尤其是 IE8）对 display: block + clear: both 的组合支持不稳定，有时会多出 1px 高度或忽略清除；而 display: table 天然创建匿名 BFC 容器，不继承 line-height、不触发外边距合并，兼容性更扎实。
- 别用
display: inline-block：受 HTML 空白符影响，可能产生意外间隙 - 别用
display: table-cell：它不响应clear，清除无效 - 现代项目若已放弃 IE8，
display: block也可用，但没必要冒险换
加了 .clearfix 还塌陷？先检查这些地方
不是代码写错了，而是上下文干扰了 BFC 生效逻辑。常见真凶：
- 父容器本身设了
position: absolute或fixed：它已脱离文档流，高度计算规则完全不同 - 父容器同时写了
overflow: hidden和.clearfix：后者冗余，前者还可能裁剪position: absolute子元素 - 子元素用了负
margin-top：和::after的clear: both交互异常，优先改用margin-bottom控制间距 - 在 Shadow DOM 或 CSS-in-JS 中：
.clearfix::after作用域受限，根本没注入到目标容器内
真正复杂的地方从来不是怎么写 ::after，而是判断「这个浮动是不是本就不该存在」
多数时候，删掉 float 改用 display: flex，比修清除逻辑更省事。2026 年的真实场景中：display: flex 或 display: grid 的父容器，子元素写 float 会被规范忽略——此时加 .clearfix 没任何意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
