高度塌陷指浮动子元素未撑开父容器导致其高度为0；可通过开发者工具查父元素computed height、确认子元素float生效、检查清除浮动机制（如clear:both、overflow:hidden、伪元素等）并用overflow:hidden临时验证。
高度塌陷在浮动布局中通常表现为父容器“看不见”子元素——明明里面有几个浮动的 div，但父容器高度为 0，边框不显示，后续内容直接叠上来。快速排查的第一步，就是确认是否缺少清除浮动机制。
看父容器有没有被子浮动“撑开”
打开浏览器开发者工具（F12），选中父元素，观察右侧“Computed”面板里的 height 值。如果显示 0px 或远小于预期，且子元素都设置了 float: left 或 float: right，基本可断定是高度塌陷。
- 再点开子元素，确认它们的
float属性确实生效（不是被覆盖或写错） - 检查父元素是否意外设置了
height: 0、min-height: 0或display: inline等干扰项
查代码里有没有清除浮动的痕迹
翻看父容器的 HTML 和 CSS，重点找以下几类“清除信号”：
- HTML 中是否存在
<div style="clear: both"></div>或类似空标签 - CSS 中父类是否写了
overflow: hidden、overflow: auto - 父类是否定义了
::after伪元素，并含content: ""+clear: both - 父元素自身是否也加了
float（不推荐，但有时会这么写）
用临时样式快速验证
在开发者工具中，给父容器临时加上一条 CSS：
立即学习“前端免费学习笔记（深入）”；
overflow: hidden;
如果加上后父容器立刻有了高度、布局恢复正常，就说明问题根源确实是浮动未清除。
- 这个操作只是验证手段，上线前应改用更稳妥的方案（如伪元素 clearfix）
- 若加了
overflow: hidden仍无效，需检查是否有position: absolute子元素干扰，或父元素被其他规则重置了 display
常见漏掉清除的典型场景
这些地方最容易忘记处理：
- 导航栏（nav）里多个
float: left的菜单项，外层 nav 没清浮 - 图文混排中图片
float: left，文字环绕，但文章容器高度塌了 - 响应式布局中，媒体查询切换了 float，但没同步更新清除逻辑
- 用了第三方 UI 组件，其内部浮动未暴露清除接口，父层需主动兜底
