父元素高度塌陷是因浮动子元素脱离文档流导致父容器无法感知其存在；clearfix通过伪元素清除浮动最稳妥，overflow:hidden有裁剪风险，现代布局应优先使用flexbox或grid。
父元素高度塌陷是因为子元素浮动了
浮动元素会脱离文档流，父容器无法感知它的存在，所以高度直接变成零。这不是 bug，是 CSS 浮动机制的自然结果——父元素“看不见”浮动子元素，也就不会撑开自己。
- 常见错误现象：
div看起来空了、背景色没显示、后续元素往上跑、边框包不住内容 - 典型使用场景：用
float: left做多栏布局，或老式导航菜单 - 别指望
height: auto或min-height能救回来——它们依赖内容撑高，而浮动内容不算“有效内容”
clearfix 是最稳妥的通用解法
给父元素加一个 clearfix 类，本质是用伪元素在末尾插入一个清除浮动的“占位”，让父容器重新计算高度。它兼容 IE8+，不依赖 JS，也不改变布局逻辑。
- 必须写对两个关键声明：
::after伪元素 +clear: both - 别漏掉
content: ""，否则伪元素不渲染，清除失效 - 别用
display: block替代display: table（后者在 IE7 下更稳） - 示例代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
overflow: hidden 有隐藏风险
给父元素设 overflow: hidden 确实能触发 BFC，强制包含浮动子元素，但它不是“清除”，而是“裁剪”。一旦子元素有负 margin、下拉菜单、tooltip 或动画移出边界，就会被切掉。
- 适合场景：父容器本就该严格限制溢出，比如卡片、固定宽高的模块
- 不适用场景：需要 dropdown、hover 展开、绝对定位子元素超出父边界的布局
- IE6/7 下
overflow: hidden可能引发 hasLayout 问题，表现不稳定 - 比
clearfix少一层语义，纯属副作用利用，后期维护容易误删
现代布局应绕过 float 清除问题
浮动本就不是为布局设计的，只是早期妥协方案。现在 Flexbox 和 Grid 已成主流，它们天然不脱离文档流，父容器高度自动正常。
- 替换成
display: flex后，float属性直接失效，无需任何清除 - Grid 布局中，浮动子元素会被忽略，同样不存在塌陷问题
- 如果还在维护老项目，优先给关键容器加
clearfix；新代码直接用display: flex，别再为 float 擦屁股 - 注意：某些 UI 库（如 Bootstrap 4 以前）仍依赖 float，升级前先查文档是否已弃用
真正麻烦的是混合场景：父元素用了 clearfix，但某个子元素又用了 position: absolute，这时候高度计算又会出意外——浮动清除了，绝对定位又脱离了，得单独处理。这种嵌套，得一眼盯住盒模型，不能只靠一个 class 蒙混过关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
