浮动导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法计算其尺寸；::after清除法通过插入display:table且clear:both的伪元素来解决，比overflow:hidden更安全可控。
为什么浮动会导致父容器高度塌陷
当子元素设置了 float: left 或 float: right，它会脱离文档流，父容器无法感知其尺寸，于是计算高度时直接忽略这些浮动子元素——结果就是父容器“看起来没内容”，高度变成 0 或远小于预期。这不是 bug，是 CSS 浮动的原始设计行为。
::after 伪元素清除浮动的具体写法
核心思路是：在浮动容器末尾插入一个看不见的块级元素，并让它强制清除前面所有浮动。关键不在“伪元素”，而在它的 clear 行为和显示方式。
标准写法如下（推荐直接复用）：
/* 推荐加在通用清浮类上，比如 .clearfix */
.clearfix::after {
content: "";
display: table;
clear: both;
}注意这三点：
立即学习“前端免费学习笔记（深入）”；
-
content: ""必须存在，否则伪元素不渲染 -
display: table比block更稳妥——它能触发 BFC，同时避免某些 IE 下的 margin 叠加问题 -
clear: both是真正起作用的部分，表示该元素不能和左右任何浮动元素在同一行
为什么不用 overflow: hidden 清除浮动
overflow: hidden 确实也能让父容器包含浮动子元素，但它本质是通过触发 BFC 实现的，副作用明显：
- 会意外裁剪掉溢出内容（比如下拉菜单、阴影、transform 位移后的部分）
- 配合
position: absolute子元素时，可能影响定位参考系 - 在 flex 或 grid 容器中无效，因为它们本身不参与 BFC 触发逻辑
而 ::after 方案只作用于布局结构，不干扰视觉表现或定位上下文，更可控。
兼容性与现代替代方案要注意什么
::after 清除法在 IE8+ 都支持，但 IE8 要求声明 content: ""（不能省略），且不支持双冒号语法，得写成 :after。如果项目还需兼容 IE7，得额外加 zoom: 1 触发 hasLayout。
现代开发中，更推荐优先使用：
- Flex 布局：
display: flex的父容器天然包含浮动子元素（其实此时浮动已失效） - Grid 布局：
display: grid同理 - 但若必须用浮动（如老系统维护、特定图文环绕场景），
::after仍是目前最干净、副作用最小的清除手段
别忘了给需要清除的容器加 class="clearfix"，否则样式不会生效——这个 class 名本身没有魔法，只是你约定的钩子。
