父容器高度塌陷是因浮动元素脱离文档流所致，clearfix伪元素通过content: ""; display: table; clear: both; height: 0;可安全修复，且比overflow: hidden更可靠，避免裁剪溢出内容。
父容器高度塌陷是因为浮动元素脱离文档流
浮动元素（float: left 或 float: right）会从普通文档流中“抽离”，导致父容器无法感知其高度，计算高度时直接忽略——不是 CSS “bug”，是规范行为。常见现象是父容器背景、边框突然截断，或后续元素上移覆盖浮动内容。
用 clearfix 伪元素是最轻量、兼容性最好的修复方式，不依赖额外 HTML 结构，也不触发 BFC（避免意外布局干扰）。
clearfix 伪元素怎么写才真正生效
核心是让父容器在末尾“生成一个清除浮动的块级内容”。只写 ::after 不够，必须同时满足：显示为块级、清除两侧浮动、不可见。漏掉任意一项都会失效。
-
content: ""必须存在（哪怕为空），否则伪元素不渲染 -
display: table或display: block都行，但table更稳妥（避免某些 IE 下block仍不撑高） -
clear: both是关键，不能写成clear: left或漏掉 - 需加
height: 0或visibility: hidden，防止伪元素本身占额外空间
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
为什么不用 overflow: hidden 替代 clearfix
overflow: hidden 确实能触发 BFC 并“撑开”父容器，但它有副作用：会裁剪溢出内容（比如下拉菜单、负 margin 元素、动画位移），且在移动端可能影响滚动表现。
而 clearfix 只作用于浮动清除，不影响其他布局逻辑。尤其当父容器本身需要 overflow: visible 或要支持绝对定位子元素越界时，overflow: hidden 就是硬伤。
- 如果父容器已有
overflow: auto且确认无溢出需求，可临时用，但非通用解 - Flex 或 Grid 布局下根本不需要 clearfix——浮动本身就不该出现在这些上下文中
- 现代项目若已弃用 float 做布局，
clearfix仅需保留在老代码或第三方组件中
IE6/7 下的兼容写法要注意什么
旧版 IE 不支持 ::after，需补 :after（单冒号），同时加上 zoom: 1 触发 hasLayout。
安全写法：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
注意：*zoom 是 IE6/7 的 hack，现代项目若已不支持这些浏览器，可省略；但维护老系统时，漏掉它会导致 IE6 下依然塌陷。
真正容易被忽略的是：clearfix 类必须加在**直接包裹浮动元素的父容器**上。套多一层 div 却忘了加 class，或者加在了祖父级上，都无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
