父容器computed height为0px或远小于内容实际高度即表明塌陷；应检查子元素float值，通过display:flow-root触发BFC解决，而非调z-index或clear。
直接看父容器的 computed height 值是否为 0px 或远小于内容实际高度——这是塌陷最可靠、最快速的判断依据，不需要猜，也不依赖工具自动报警。
用开发者工具一眼定位塌陷容器
在 Chrome / Edge / Firefox 中打开开发者工具（F12），选中疑似有问题的父元素（比如 .sidebar、.card-list、.post-content），切换到右侧“Computed”面板，直接搜索或滚动找到 height 项：
- 如果显示
0px，且内部有可见的浮动子元素（float: left或float: right），基本就是塌陷 - 如果显示
16px或24px这类极小值，但内容明显不止一行文字，也属于塌陷（说明只由行高或内联文本撑起） - 同时检查
background-color是否不可见、border是否缩成细线、padding是否没包裹内容——这些是视觉佐证
为什么不能只看 HTML 结构或 CSS 文件？
浮动是否导致塌陷，不取决于有没有写 float，而取决于父容器是否“感知”到它。以下情况会让 float 存在但不引发塌陷：
- 父容器已设置
display: flex或display: grid—— 此时float被浏览器忽略，子元素仍参与流式布局 - 父容器设置了
overflow: hidden、display: flow-root或position: absolute—— 这些都触发了 BFC，天然包含浮动子项 - 父容器本身有固定
height或足够高的min-height—— 高度被强制设定，塌陷被掩盖，但background和margin-bottom传递仍可能异常
如何确认某个子元素确实是“浮动脱离流”的元凶？
在 Elements 面板中逐个点选子元素，查看其 Computed 样式中的 float 值，并结合 Layout 面板观察它的实际渲染位置：
- 如果
float显示为left或right，但该元素的offsetTop/offsetLeft明显偏离文档流预期（比如本该在第二行却飘到了第一行右侧），说明它已脱离流 - 右键该元素 → “Scroll into view”，再看它是否“悬空”在父容器之外（用
outline: 1px solid red临时加边框更直观） - 特别注意：
<img>、<span></span>等 inline 元素若设了float，必须搭配display: block才稳定生效；否则可能在某些浏览器中表现不一致
嵌套浮动时最容易漏掉哪一层？
浮动影响不会穿透层级——父容器清好了，不代表子容器也清好了。常见漏点：
-
.article加了.clearfix，但里面的.media也含浮动图片和标题，而.media自身高度是0px -
.nav用了display: flow-root，但其子项.dropdown-menu是position: absolute，且父级.nav-item又用了float导致自身塌陷，结果下拉菜单定位错乱 - 排查方式：从外向内，每层都点开看
computed height，哪层是0px就在哪层补 BFC，不要假设“外层清了，里面就安全”
真正难的不是发现哪个节点塌了，而是意识到：只要父容器没触发 BFC 或没清除浮动，哪怕只有一个 float: left，它就可能让整个布局链式失效。别跳过 Computed 面板里的那个 0px —— 它不会撒谎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
