height强制固定高度会裁剪溢出内容，无法撑开容器；应改用min-height或移除height以实现自适应，或通过BFC、flex、grid等现代布局解决塌陷问题。
当 CSS 中设置了 height，但内容超出该高度却没撑开容器，本质是 height 属性强制限定了盒子的固定高度，它会切断或隐藏溢出内容，而不是“让内容决定高度”。要让容器随内容自然撑开，关键在于理解 height 与文档流的关系。
height: 固定高度 ≠ 自适应高度
设置如 height: 200px 后，无论内部文字、图片、子元素多高，容器都严格保持 200px。超出部分默认被裁剪（overflow: hidden 行为），视觉上就像“没撑开”。这不是 bug，而是 height 的设计本意——它脱离内容流，属于“主动指定尺寸”。
- 若希望容器包裹全部内容，请改用
min-height: 200px：保证至少 200px 高，同时允许内容更多时自动增高 - 完全依赖内容高度？直接移除 height 声明，让元素回归
height: auto（默认值） - 注意：flex 容器子项、绝对定位元素、浮动元素等可能脱离文档流，也会导致父容器无法感知内容高度
常见“撑不开”的真实原因
有时即使没写 height，容器仍不撑开，往往不是 height 的问题，而是布局方式干扰了高度计算：
-
父容器未设定高度且未参与 BFC：比如子元素浮动后，父容器塌陷（高度为 0）。解决方法：触发 BFC（如
overflow: hidden）、清除浮动（::after { content:""; display:table; clear:both; }）或改用 flex/grid - 子元素使用绝对定位（position: absolute）：它完全脱离文档流，父容器对其高度“视而不见”
- 字体行高或内边距错觉：内容看似溢出，实则是 line-height 过大或 padding/margin 导致视觉错位，检查 computed styles 更准确
现代布局中更可靠的替代方案
与其反复调试 height，不如用更语义化、流式友好的方式控制高度行为：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height替代height，兼顾最小限制与内容自适应 - Flex 布局中，设父容器
display: flex; flex-direction: column;，子项用flex: 1占满剩余空间，天然响应内容变化 - Grid 布局中，用
grid-template-rows: auto 1fr auto等组合，让某区域自动伸缩 - 避免在需要自适应的容器上同时写 height 和 overflow: hidden —— 这等于主动放弃内容可见性
不复杂但容易忽略：height 是“我规定你多高”，而内容流是“你多高我就多高”。选对属性，比强行 hack 更稳。
