浮动导致父容器塌陷是因为浮动元素脱离文档流，父容器无法感知其高度而坍缩为0；clearfix通过::after伪元素插入display:table、clear:both的不可见节点来撑开父容器。
为什么浮动会导致父容器塌陷
当子元素设置了 float: left 或 float: right，它会脱离文档流，父容器无法感知其高度，于是高度坍缩为 0 —— 这不是 bug，是浮动本意（用于文字环绕）。但现代布局中，我们常需要父容器“包住”浮动子项，否则背景、边框、后续元素都会错位。
clearfix 的核心原理是什么
::after 伪元素插入一个看不见的块级节点，通过 clear: both 强制它下沉到所有浮动元素下方，从而撑开父容器。关键不在“清”，而在“撑”：这个伪元素本身有高度（哪怕只有 height: 0），且不浮动，所以父容器能计算它的位置。
常见错误写法：.clearfix::after { content: ""; display: block; clear: both; } —— 缺少 height: 0 或 visibility: hidden 可能在某些旧浏览器中意外撑高；漏掉 display: table 或 display: block 则 clear 不生效。
推荐的 clearfix 写法及兼容性说明
以下是最小可靠版本，覆盖 IE8+ 和所有现代浏览器：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 触发 IE6/7 hasLayout，仅需此行 */
}说明：
-
display: table比display: block更稳妥：避免在某些 IE 版本中因 line-height 导致额外间隙 -
*zoom: 1是 IE6/7 专用 hack，触发 hasLayout，让父容器能正确包裹浮动子项（IE8+ 已不需要） - 不需要
height: 0或visibility: hidden——content: ""+display: table本身已无视觉影响 - 不要用
display: flex或display: grid替代：它们虽能自动包含浮动，但会改变布局模型，不是“清除浮动”的等价方案
什么时候不该用 clearfix
如果父容器本身已经是 BFC（Block Formatting Context）容器，比如设置了 overflow: hidden、display: flow-root、position: absolute 等，它天然就能包含浮动子项，无需 clearfix。
现代推荐优先用 display: flow-root 替代 clearfix：
.container {
display: flow-root; /* 原生 BFC，无副作用，无需伪元素 */
}但注意：flow-root 不支持 IE，若需兼容 IE11 及以下，仍得回退到 clearfix。
真正容易被忽略的是：clearfix 解决的是“高度塌陷”，不是“布局错乱”。如果浮动后元素重叠、换行异常，问题往往出在宽度计算或 white-space 上，加 clearfix 并不能修复。
