伪元素能闭合浮动是因为它在父元素末尾插入一个参与文档流的块级虚拟子元素，通过clear: both避开浮动并撑开父高；标准写法为.clearfix::after { content:""; display: table; clear: both; }，需配合*zoom: 1兼容ie6-7，且不可用于flex/grid容器。
为什么伪元素能闭合浮动
浮动元素脱离文档流，父容器“看不见”它们的高度，于是塌陷。伪元素 ::after 会在父元素内容末尾自动插入一个不可见的块级节点，配合 clear: both，就能强制它撑开父容器——本质上是模拟了那个“空 div”的作用，但完全不污染 HTML 结构。
.clearfix::after 的标准写法与关键参数
现代浏览器推荐用这个最小化版本：
.clearfix::after {
content: "";
display: block;
clear: both;
}
注意这三点：
-
content: ""必须存在，否则伪元素不渲染 -
display: block是为了能生效clear，inline或inline-block都无效 -
clear: both是核心，只写clear: left或right会漏掉反向浮动
IE8–IE9 兼容必须加 *zoom: 1
老版本 IE 不支持 ::after（只认 :after），且需要触发 hasLayout 才能让父容器正确包裹。所以完整写法应是：
.clearfix {
*zoom: 1;
}
.clearfix::after,
.clearfix:after {
content: "";
display: table;
clear: both;
}
其中：
-
display: table比block更稳妥，避免某些场景下 margin 折叠问题 -
*zoom: 1是 IE6/7 hack，对现代浏览器无影响 - 同时写
::after和:after是为了兼容旧 IE
别在 flex/grid 容器里硬套 clearfix
如果父容器已设 display: flex 或 display: grid，浮动本身就不该存在——这些布局模型天然无视 float，也不存在塌陷。强行加 .clearfix 不仅无效，还可能干扰子项排列逻辑。真正要解决的是：为什么还在用 float？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
