父容器高度塌陷主因是浮动脱离文档流或flex子项未设flex-shrink:0；overflow:hidden触发BFC可快速修复，min-height+内容兜底更语义化稳定。
为什么 float 或 flex 子项会导致父容器高度塌陷
当子元素使用 float: left 或 display: flex 且未设置明确高度时，父容器可能无法感知子元素的布局边界，表现为高度为 0 或远小于预期。这不是 bug，而是 CSS 渲染机制决定的：浮动元素脱离文档流，flex 容器在某些情况下（如子项未设 flex-basis 或内容为空）也可能不触发最小尺寸计算。
用 overflow: hidden 触发 BFC 是最简解法
给塌陷的父容器添加 overflow: hidden（或 overflow: auto）可强制创建块级格式化上下文（BFC），使其包含浮动子元素并正确计算高度。该方案兼容性好（IE6+），无额外 DOM 开销。
.container {
overflow: hidden; /* 关键：触发 BFC */
}
.container > .item {
float: left;
width: 200px;
}- 慎用
overflow: hidden于有下拉菜单、弹层、滚动区域的容器，可能意外裁剪内容 -
overflow: auto在不需要滚动时会多出空滚动条（尤其 Safari），可用overflow: overlay（仅支持较新 Chrome/Edge）缓解 - 若父容器本身需滚动，优先考虑
min-height+ 内容兜底，而非依赖 BFC
min-height 配合内容兜底更可控
当高度塌陷源于“内容极短”或“异步加载中空白期”，min-height 是更语义化、更安全的控制方式。它不干预布局流，只设定底线，且与 flex / grid 兼容良好。
.card {
min-height: 120px; /* 保证至少显示一屏关键信息 */
display: flex;
flex-direction: column;
}
.card-content {
flex: 1; /* 占满剩余空间 */
}-
min-height值建议基于设计稿最小内容场景（如标题+一行摘要）测算，避免硬写100vh导致移动端过长 - 响应式中应配合媒体查询调整：
@media (max-width: 768px) { .card { min-height: 80px; } } - 若内容动态加载，可先设
min-height，加载完成后再移除或改用height: auto
Flex 容器自身塌陷的隐藏原因：子项未设 flex-shrink: 0
常见于卡片列表中图片+文字组合：图片设了 width: 100% 但未限制 flex-shrink，导致父容器被压缩到内容最小尺寸（甚至 0）。
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
min-height: 150px;
}
.card img {
width: 100%;
flex-shrink: 0; /* 关键：防止图片被压缩到消失 */
}
.card p {
margin: 0;
flex: 1; /* 文字占剩余空间 */
}- 默认
flex-shrink: 1允许子项收缩，对图片、图标等非文本内容常是陷阱 -
flex-shrink: 0不影响伸展（flex-grow），只锁定最小尺寸 - 在移动端小屏幕下，若图片宽高比失衡，还需配合
object-fit: cover和固定容器aspect-ratio
实际项目里，高度塌陷往往不是单一原因。先检查是否用了 float 或未设 flex-shrink 的 flex 子项，再决定用 BFC 还是 min-height——前者治标快，后者治本稳。真正容易被忽略的是：塌陷常发生在组件复用时，比如同一 .card 类在首页和搜索页表现不同，根源可能是某处漏写了 flex-shrink: 0 或媒体查询覆盖不全。
