父元素高度为auto时子元素“看不见”高度，根本原因是子元素脱离文档流或父容器未形成BFC；常见于float、absolute、flex压缩、图片未设宽高比、height:100%父级无确定高度等场景。
父元素高度为 auto 但子元素“看不见”高度
这不是 CSS 失灵，而是父容器压根没把子元素当“有高度的东西”来计算。根本原因在于：子元素脱离了文档流，或父容器未形成能感知内容的包含块（BFC）。常见于 float、position: absolute、display: flex 且子项被压缩等场景。
-
float元素会脱离文档流 → 父容器高度塌陷为 0；加overflow: hidden或display: flow-root可触发 BFC，让父容器重新包裹它 -
position: absolute的子元素完全不参与高度计算 → 父容器对其“视而不见”，必须用min-height预留空间，或改用transform+position: relative模拟偏移 - 图片未设
height或aspect-ratio，加载前塌陷 → 父容器按 0 高度渲染，后续重绘不触发回流撑高
Flex 布局中子元素明明有内容却撑不开父容器
Flex 容器默认是“内容自适应高度”，但一旦你给它加了 height、max-height，或子项启用了 flex-shrink: 1（默认值），就可能被压缩到视觉上“撑不开”。尤其在 flex-direction: column 下，高度是主轴方向，flex-shrink 会直接作用于子项高度。
- 检查父容器是否误设了
min-height: 0—— 这会关闭align-items: stretch行为，子项不再拉伸 - 子项若写了
align-self: flex-start或父容器设了align-items: flex-start，就等于主动放弃交叉轴拉伸 - 子项设置了
height但没设box-sizing: border-box→padding和border会额外撑出，导致视觉错位，以为“没撑开”
height: 100% 为什么总是无效
height: 100% 不是“我要占满父容器当前高度”，而是“我要等于父容器的计算高度值”。如果父容器高度是 auto（由内容撑开），那它的计算高度就是未定义的，百分比就失效 —— 这是规范行为，不是 bug。
- 只有当父容器有确定的高度（如
height: 200px、height: 100vh、或父父级有固定高度）时，height: 100%才有效 - 嵌套多层时，每一级父元素都必须有可计算的高度，漏一级就断链
- 替代方案更可靠：
flex: 1（在 flex 容器中）、min-height: fit-content（现代浏览器）、或直接去掉height改用min-height
内容本身没产生实际高度，父容器自然“撑不开”
再完美的 CSS 也救不了“没有高度的内容”。开发者工具里看到子元素 Computed Height 是 0px，往往不是样式写错了，而是内容根本没生成布局框。
立即学习“前端免费学习笔记（深入）”；
- 空
<span>、font-size: 0、line-height: 0、visibility: hidden→ 元素存在但无渲染高度 -
white-space: nowrap下长文本溢出容器却不换行 → 若父容器宽度受限，内容可能被裁剪，但高度仍为单行高度 - 图片加载失败或未设置
height/aspect-ratio→ 替换元素默认宽高由 intrinsic size 决定，加载前为空 - 调试技巧：临时加
background: #ff0或outline: 1px solid red，确认子元素是否真有渲染区域
min-height: 0 看似无害，实则在 Flex 中静默禁用拉伸；transform: scaleY(2) 看似拉高了，但盒模型高度仍是原始值。这些细节不靠猜，得看 computed styles。 
