父容器塌陷是因绝对定位子元素脱离文档流；需给父容器设position: relative并配合min-height/height，或改用relative/flex布局避免高度失效。
绝对定位子元素会让父容器“看不见”高度
写了 min-height: 300px，但父容器在页面上还是塌陷成一条线——大概率是里面混进了 position: absolute 的子元素。它脱离文档流，父容器计算自身高度时直接忽略它，哪怕它内容再高、再占空间，父容器的 min-height 也只按“空盒子”去算。
怎么快速确认是不是这个原因
打开开发者工具，选中父容器，在 Elements 面板里挨个看子元素的 position 值；或者直接在 Styles 面板搜索 absolute。更直观的方法是临时给所有子元素加 outline: 1px solid red，你会发现那些绝对定位的元素轮廓飘在别处，和父容器的视觉边界对不上。
- Computed 面板里父容器的
height和min-height显示已生效，但实际渲染高度仍是auto（比如 24px） - 父容器设置了
border，但边框只包住文字或浮动元素，不包住弹窗、下拉菜单这类绝对定位块 - 滚动条没出现，内容却“消失”了——其实是被绝对定位元素盖住，或溢出到视口外
修复方案不是“去掉 absolute”，而是控制它的作用域
绝对定位本身没问题，问题在于它没被约束在有高度的包含块里。关键不是删掉 position: absolute，而是确保它所在的那个“最近非 static 祖先”本身有明确高度。
- 给父容器加
position: relative（这是最常用且安全的做法），让它成为绝对定位子元素的包含块 - 同时给该父容器设置
min-height或height（比如min-height: 300px），否则包含块自身高度为auto，min-height依然不触发 - 如果子元素需要撑开父容器（比如弹层要随内容变高），就别用
absolute，改用position: relative或包裹一层display: flex
容易被忽略的细节：top/bottom + min-height 冲突
当绝对定位元素同时写了 top: 0 和 bottom: 0，浏览器会优先按定位拉伸高度，此时 min-height 可能被完全绕过——哪怕你写在样式表最后也没用。
- 想保留弹性高度，就别设
bottom，只设top和min-height - 若必须上下锚定，用
height: auto替代min-height，并配合max-height控制上限 - 注意：绝对定位元素自身的
min-height是有效的，但它不会反向影响父容器高度，这点和普通流内元素完全不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
