父元素高度塌陷主因是子元素脱离文档流或盒模型理解偏差；height: 100% 失效因父级无显式高度；推荐用 flex 布局、border-box 和 min-height 替代硬编码 height。
父元素高度塌陷的常见原因
父元素没高度，往往不是因为子元素没设 height，而是盒模型行为被忽略。CSS 默认使用 content-box，此时设置的 height 仅指内容区高度，padding 和 border 会额外撑开父容器——但若子元素是浮动、绝对定位或 display: inline（比如未清浮动的 div），它就可能完全脱离文档流，导致父元素“看不见”它，从而高度塌陷。
检查 padding 是否意外撑高了子元素
即使子元素写了 height: 200px，如果同时有 padding: 20px，在 box-sizing: content-box（默认）下，真实占用高度就是 240px。而父元素若没设 min-height 或 height，又没其他块级子元素撑开，就会表现得“不够高”。
- 用浏览器开发者工具选中子元素，看
Computed面板里的height和border-box size是否一致 - 快速验证：给子元素加
box-sizing: border-box，让height包含padding和border - 若父元素需严格包裹内容，优先设
min-height而非height，避免内容溢出时被截断
为什么 height: 100% 经常失效
height: 100% 不是“占满可视区”，而是“占满父元素的计算后高度”。如果父元素没显式高度（比如没设 height 或 min-height，且子元素又没把它撑开），那 100% 就等于 0px。
- 逐级向上检查：父 → 祖父 → body → html，任一环节缺失高度约束都会中断传递
-
html, body { height: 100% }是常见起点，但仅当根容器需要撑满视口时才适用 - 更健壮的替代方案：
height: 100vh（视口高度），或用flex/grid布局让父元素自动适应内容
用 display: flex 替代硬写 height
硬编码高度在响应式场景下极易断裂。Flex 布局能自然让父元素包裹子元素，同时支持对齐、拉伸等控制，避免手动计算。
立即学习“前端免费学习笔记（深入）”；
/* 父元素 */
.container {
display: flex;
flex-direction: column;
}
/ 子元素（即使有 padding）也会被包含在父元素高度内 /
.child {
padding: 20px;
box-sizing: border-box;
}
注意：若子元素用了 position: absolute，它仍会脱离 flex 流，此时必须移除定位或改用 align-self + margin 模拟效果。
真正卡住的点，往往是把 height 当成“最终渲染高度”来理解，而忽略了 box-sizing、文档流状态和百分比高度的依赖链。调试时先禁用所有 position 和 float，再逐个打开 padding、border，观察 computed height 变化，比反复改 height 值有效得多。
