::after伪元素清除浮动是最实用且不污染结构的方案，需作用于浮动子元素的直接父容器，且该容器不能是flex/grid布局或已有其他::after规则；content: ""不可省略，display: table比block更稳，clear: both强制虚拟块落于浮动元素下方以撑开父容器。
::after 伪元素清除浮动是当前最实用、最不污染结构的方案，前提是它被加在正确的父容器上，且没被其他样式意外覆盖。
为什么直接给父容器加 .clearfix::after 就能清浮
浮动子元素脱离文档流，父容器“看不见”它们的高度，于是塌陷。而 ::after 在父容器末尾生成一个虚拟块，display: table 让它参与 BFC 布局，clear: both 强制它落到所有浮动元素下方——这一落，就把父容器底部撑开了。
-
content: ""不可省略，也不能写成content: " "（带空格），否则可能引入不可见行高 -
display: table比display: block更稳：它天然创建匿名 BFC，不继承 line-height，也不受 vertical-align 影响 - 不要同时加
overflow: hidden和clear: both，后者在前者已生效时纯属冗余，还可能裁掉position: absolute的下拉菜单
.clearfix::after 写法必须匹配的三个条件
写对了样式，但没生效？大概率是这三个条件中某一个没满足：
- 必须作用于**浮动子元素的直接父容器**，不是祖辈、也不是浮动元素自己
- 该父容器不能是
display: flex或display: grid——此时 float 被忽略，清也白清 - 该父容器不能已有其他
::after规则（比如图标或装饰），否则你的clear: both可能被覆盖；需合并声明，而非重复定义
IE6/7 兼容不是必须，但加了也不碍事
如果你的项目还跑在 IE6–7 上（极少见），得补一行触发 hasLayout 的 hack：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：*zoom: 1 是 IE 专有前缀，现代浏览器完全忽略；不用 overflow: hidden 替代，它会截断溢出内容。
什么时候别硬套 ::after 清浮动
它不是万能膏药，以下情况加了反而添乱：
- 父容器本身已是 BFC（比如设置了
overflow: auto、display: flow-root或float自身）——高度本来就不会塌，再加::after属于多此一举 - 子元素用了
position: absolute或position: fixed，它们本就不参与文档流，所谓“浮动塌陷”根本不存在 - 在 Shadow DOM 或 CSS-in-JS 环境中，
::after选择器可能因作用域限制压根不渲染，得检查 computed styles 确认伪元素是否真实存在
真正容易被忽略的点在于：你是不是还在用 float 做整体布局？2026 年，display: flex 和 display: grid 已是默认选项，::after 清浮动只该用在兜底、兼容或遗留模块里——不是技术不够好，而是它本就不该是首选解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
