子元素撑不开父元素的根本原因是父容器未形成包含块或未触发BFC，且与盒模型高度计算、浮动/定位脱离文档流、transform视觉拉伸、flex/Grid默认行为及内容实际高度缺失密切相关。
子元素撑不开父元素，根本原因是父容器没有形成“包含块”或未触发BFC，同时内容高度未被正确计算——这和css盒模型中content height、height、min-height以及浮动/定位等行为密切相关。
父元素高度为0或auto但子元素不生效
常见于父元素没设高度、子元素用了浮动（Float）或绝对定位（position: absolute）。浮动元素会脱离文档流，父元素无法感知其高度；绝对定位元素完全脱离流，对父高无任何贡献。
- 若子元素仅用
float，给父元素加overflow: hidden或overflow: auto可触发BFC，使其包裹浮动子项 - 避免对需要撑高的子元素使用
position: absolute；如必须定位，改用position: relative或配合transform替代 - 现代方案：父元素用
display: flow-root（最干净的BFC触发方式），兼容性已覆盖主流浏览器
子元素有height但父元素仍不扩展
当子元素设置了固定height，而父元素是height: auto时，本该撑开——但如果父元素存在max-height、min-height冲突，或子元素被transform/scale缩放，视觉上“变高”但布局高度未变，也会导致撑不开。
- 检查父元素是否误设了
height: 0、height: 1px或max-height: 0 -
transform: scaleY(2)不会改变元素的盒模型高度，只是视觉拉伸，不能撑开父级 - 用
min-height: fit-content（需注意兼容性）或min-height: -moz-fit-content作为备选
Flex/Grid容器中的“假性撑不开”
在display: flex或grid容器中，子元素默认不自动撑开父容器高度，尤其当父元素没设height且子项未设置flex: 1或align-items: stretch时，容易误以为“撑不开”。
立即学习“前端免费学习笔记（深入）”；
- Flex容器中，子项默认
align-items: stretch，但前提是父容器自身高度可被内容决定；若父容器被外层约束（如height: 0），仍无法撑开 - 确保父Flex容器没设
align-items: flex-start或align-items: center（会取消拉伸） - grid布局中，用
grid-template-rows: 1fr或minmax(0, 1fr)可让行高随内容自适应
内容本身没产生实际高度
文字未换行、图片未加载、font-size: 0、line-height: 0、空标签+visibility: hidden等，都会导致子元素“有结构无高度”，父元素自然无法被撑开。
- 用开发者工具检查子元素的Computed Height，确认是否真为0px
- 图片记得加
height或aspect-ratio，避免加载前塌陷 - 纯空span或
white-space: nowrap下可能不占高度，改用display: inline-block或加font-size: 12px