父容器 computed height 为 0px 通常是浮动导致的塌陷，根源是浮动元素脱离文档流；需通过开发者工具验证高度、检查伪元素是否生效、逐层触发 BFC 并正确使用 clear。
父容器 computed height 是 0px？先确认是不是塌陷本身
浮动元素脱离文档流，父容器高度计算不包含它们——这是塌陷的根源，不是 bug。直接打开开发者工具，选中父容器，在 Computed 面板里查 height 值：如果是 0px 或明显偏小（比如只有 2px），基本可锁定是浮动导致的塌陷。
此时别急着加 clear 或改子元素，先做两件事：
- 临时给父容器加
border: 1px solid red，看边框是否只围住空白区域 - 鼠标悬停在浮动子元素上，检查它是否能正常触发
:hover样式——能触发，说明它渲染了，只是父容器“没看见”
clearfix 加了但没生效？检查伪元素是否被覆盖或禁用
.clearfix::after 不是魔法，它依赖三个硬性条件：伪元素必须渲染、必须是块级、必须起清除作用。常见失效原因包括：
-
content: ""被遗漏或写成content: none—— 伪元素不会生成 -
display写成inline或inline-block——clear对非块级元素无效 - 父容器本身有
overflow: hidden且设置了height，会压制伪元素的布局影响 - CSS 优先级冲突：其他规则把
clear: both覆盖成了clear: none
验证方式：在 Elements 面板中右键父容器 → “Force state” → :hover，再看 ::after 是否出现在 DOM 树里；若没出现，content 就是问题源头。
立即学习“前端免费学习笔记（深入）”；
嵌套浮动容器层层塌陷？必须逐层触发 BFC
浮动的影响不会穿透多层父容器。比如 .wrapper > .sidebar > .item 中，.item 浮动只会让 .sidebar 塌陷，而 .sidebar 塌陷又会让 .wrapper 塌陷——但给 .wrapper 加 .clearfix 并不能修复 .sidebar 的高度问题。
- 用开发者工具逐层点击每个疑似浮动容器（如
.nav、.card-list、.media） - 每层都单独检查
Computed → height，哪层为0px，就在哪层加display: flow-root或overflow: hidden - 避免全局复用一个
.clearfix类——它必须写在该容器自己的 CSS 规则里才生效
clear: both 加在哪？不是加给浮动元素，而是加在它后面第一个块级兄弟上
clear 的作用不是“清除浮动”，而是“让当前元素避开前面浮动元素的边界”。所以它必须出现在浮动元素之后、且是块级元素上。典型翻车点：
- 把
clear: both直接写在浮动子元素自己身上——完全无效 - 浮动后跟的是
<span></span>或<a></a>，但没设display: block——clear对 inline 元素无意义 - 浮动后没有紧邻的兄弟元素（比如 HTML 里浮动
<div> 后直接闭合父容器）——根本无处可清 <p>最稳妥的做法：结构允许时，加一个空的 <code><div style="clear: both"></div>在浮动元素之后；结构受限时，直接给父容器加display: flow-root，比依赖clear更可靠。真正难定位的是多种原因叠加：比如
opacity: 0+ 父容器塌陷 +overflow: hidden，结果既看不到内容，也看不到容器边框，连审查工具都要关掉几层样式才能揪出问题。动手前先分清——是元素没渲染，还是渲染了但被藏起来了。
