父容器高度塌陷是因浮动元素脱离文档流导致其无法感知子元素高度，表现为height:0px、背景边框消失及后续元素错位；需通过clearfix伪元素、overflow:hidden或display:flow-root触发bfc来修复。
直接看父容器高度是否塌陷——如果它在开发者工具里显示 height: 0px 或远小于预期，且子元素有 float: left 或 float: right，那它就是没清浮动的元凶。
用开发者工具一眼揪出塌陷的父容器
打开 Chrome DevTools（F12），用 Ctrl+Shift+C（Win）或 Cmd+Shift+C（Mac）点选页面中错位区域里的任意一个子元素，然后往上逐层点它的父节点，在右侧 Computed 面板里盯住 height 值：
- 如果某个父
<div>、<code><section></section>的height是0px或几像素，但里面明明有浮动图片或列表项，基本锁定 - 再看它的
display是否为block，且overflow是visible（默认值）——这说明它没触发 BFC，也没清浮动 - 鼠标悬停在 Elements 面板中的该父元素上，观察高亮框是否“包不住”里面的浮动子项；如果子项飘在高亮框外面，就是塌陷实锤
- 把
clear: both写在浮动<div class="float-item"> 内部样式里 → 它只影响自己位置，不反馈给父容器 <li>清除节点是 <code><span></span>或设置了display: inline的元素 →clear对非块级元素无效 - 浮动元素后面根本没放任何兄弟块元素（比如 HTML 里直接闭合了父容器）→ 没地方可清
- 清除节点被
display: none或visibility: hidden隐藏了 → 样式存在，但不参与布局 - 在 Console 面板运行：
$$('div, section, article, header, footer, aside, main, p, h1-h6').forEach(el => el.style.border = '1px solid #f00')（注意：只匹配这些标签，不含空浮动元素） - 重点观察三类异常：
— 父容器红框“断开”，但内部浮动子项红框完整延伸到右边缘 → 父没包裹，需加 BFC
— 文字容器的红框从顶部就被截断，文字从浮动图下方“钻出来” → 缺少清除或未触发 BFC
— 多个并排浮动项中，某一个底部红框明显更低 → 可能内部有未闭合标签或margin-bottom没撑开父级 -
.clearfix::after里漏了content: ""→ 伪元素根本不渲染，clear形同虚设 - 写了
display: block而不是display: table（或table-cell）→ 在 IE8+ 中clear可能不生效 - 父容器本身设置了
height: 0、font-size: 0或line-height: 0→ 伪元素被压扁，失去清除能力 - CSS 类名拼写错误，比如
class="clear-fix"而不是class="clearfix"，或选择器权重被更高优先级规则覆盖
检查 clear 是否加在了错误位置
clear: both 不是给浮动元素自己加的，它只对“紧跟其后的块级兄弟元素”生效。常见误操作会导致你以为清了，其实没起作用：
用边框法快速显形浮动影响范围
不用改源码，实时加边框让盒模型“露出来”，能立刻看出哪些容器没占位、哪些内容被挤偏：
为什么有时候加了 clearfix 还是没用
伪元素清除看似万能，但几个细节一漏就失效：
真正容易被忽略的是：浮动的影响可能跨层级传递。比如外层容器用了 flex，内层某个子模块又单独用了 float，问题其实藏在那个子模块的父级里，而不是最外层——得一层层往里查 computed display 和 height，不能只盯着第一眼看到的错位位置。
