父元素高度被子元素“撑开”的根本原因是其 height 默认为 auto，而 auto 的计算逻辑是包裹所有参与文档流的子元素内容高度；脱离文档流（如 float、absolute）、父设固定高度或子用 height: 100%（父无确定高度）则不会撑开。
父元素高度为什么会被子元素“撑开”？
根本原因在于：**块级父容器的 height 默认值是 auto，而 auto 的计算逻辑就是“包裹所有参与文档流的子元素内容高度”**。这不是“特性”，而是 CSS 盒模型 + 正常流（normal flow）的自然结果。
- 只要子元素是
display: block、display: flex、display: grid等不脱离文档流的类型，且未设position: absolute/fixed，它就参与父容器高度计算 - 父容器的
padding和border会额外增加总高度，但不参与“撑开”逻辑——撑开只由内容区（content height）驱动 - 行内元素（如
）默认不撑高父容器，除非它所在行因line-height或换行被拉高，或显式设为inline-block
哪些情况会让父元素“不撑开”？常见失效场景
不是子元素没高度，而是它“没被父元素看见”。典型失效链路：
-
float子元素：完全脱离文档流 → 父容器高度塌陷为 0；解决用display: flow-root（推荐）或::after { clear: both } -
position: absolute/fixed子元素：脱离文档流 → 不贡献高度；若需视觉上“占位”，得手动加min-height或用伪元素模拟 - 父元素设了固定
height（如height: 200px）：此时高度由声明值决定，子元素再高也只会溢出或触发滚动，不再“撑开” - Flex/Grid 容器中子项设
align-self: stretch但父容器没设height→ 子项仍能撑开父容器（这是 Flex 的默认行为），但若父容器同时设了max-height，则可能被截断
想让子元素“撑满”父容器高度？别直接写 height: 100%
height: 100% 是个经典陷阱：它要求父元素有**确定的高度值**（非 auto）。而多数情况下，你正想让父元素“被撑开”，这就形成矛盾——父没高，子没法 100%。
- ✅ 正确思路：用布局机制替代百分比，比如父设
display: flex; flex-direction: column，子设flex: 1，即可自适应剩余空间 - ✅ 或父设
display: grid; grid-template-rows: 1fr，子自动填满 - ❌ 错误写法：
.parent { height: auto; }—— 此时
.child { height: 100%; }100%计算结果为0px，因为auto不是可计算高度 - ⚠️ 注意兼容性：IE11 对
flex: 1在某些嵌套下表现异常，必要时用flex: 1 1 0显式声明
调试技巧：一眼看出谁在撑高父容器
打开浏览器开发者工具，选中父元素，在 Computed 面板看 height 值右侧是否标注 (computed from children)；再逐个禁用子元素的 display 或 position，观察父高度变化。
立即学习“前端免费学习笔记（深入）”；
- 特别注意
margin：垂直方向上的相邻块级子元素margin会发生折叠（collapsing），最终撑开父容器的是“净 margin 范围”，不是每个子元素的 margin 简单相加 - 检查
line-height：如果父容器内只有文本或行内元素，高度往往由其自身的line-height决定，而非子内容；此时改子元素display类型比调line-height更直接 - 浮动/绝对定位子元素不会出现在“影响高度的元素列表”里，但它们的
top/left偏移可能遮挡真实内容，造成视觉误判
