浮动导致父容器高度塌陷是因脱离文档流；::after伪元素通过display:table+clear:both清除浮动；推荐clearfix方案，现代可用display:flow-root。
浮动元素导致父容器高度塌陷的典型表现
当子元素设置了 float: left 或 float: right，而父容器没有设置固定高度时，父容器的 height 会变成 0 —— 这不是 bug，是浮动脱离文档流后的自然行为。常见现象包括：背景色消失、边框不包裹内容、后续元素向上“顶”进浮动区域。
为什么 ::after 伪元素能清除浮动
本质是利用 clear: both 强制在父容器末尾插入一个不可见的块级元素，撑开高度。相比给父容器加 overflow: hidden（可能隐藏溢出或影响 position: absolute 子元素），::after 更可控、副作用小。
关键点：
-
content必须存在（哪怕为空字符串""），否则伪元素不渲染 - 必须设为
display: table或block，inline无法触发clear -
clear: both要作用于伪元素自身，不是父容器
标准清除浮动的 CSS 写法
推荐使用以下最小化写法，兼容 IE8+：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack，触发 hasLayout */
}说明：
-
display: table比block更稳妥——避免某些浏览器中margin折叠问题 -
*zoom: 1是针对旧版 IE 的私有 hack，现代项目可省略 - 只需给浮动元素的直接父容器添加
class="clearfix"即可
容易被忽略的三个细节
实际项目中常因这些疏漏导致清除失效：
- 伪元素的
content写成content: none—— 这不会生成节点，必须用""或" " - 父容器本身设置了
height或min-height，掩盖了塌陷问题，但一旦移除就暴露 - 浮动元素用了
transform或will-change，可能创建新的层叠上下文，干扰clear的计算逻辑（此时优先考虑display: flow-root替代方案）
现代替代方案 display: flow-root 更简洁，但 IE 完全不支持；如果只需兼容 Chrome/Firefox/Edge，一行就能解决：display: flow-root。
