父div高度塌陷主因是子元素浮动脱离文档流，导致父容器无法感知其高度；解决法包括overflow:hidden、伪元素清除浮动或display:flow-root；此外需排查绝对定位、显式height:0、flex/grid内容缺失及多因素叠加影响。
子元素浮动导致父 div 高度塌陷
这是最常见也最容易被忽略的原因：当子元素用了 float: left 或 float: right，它就脱离了文档流，父 div 无法感知它的高度，于是“缩成一条线”。你检查盒模型时会发现父容器的 height 计算结果是 0（或仅含内边距/边框）。
解决思路不是强行设 height，而是让父容器重新“包含”浮动子元素：
- 给父
div加overflow: hidden（兼容性好，但注意会裁剪溢出内容） - 用伪元素清除浮动：
::after { content: ""; display: table; clear: both; }，推荐加在父容器上 - 改用
display: flow-root（现代方案，语义清晰、无副作用，Chrome 64+ / Firefox 57+ 支持）
display: flex 或 display: grid 容器里子元素不占高度
Flex/Grid 容器本身不会塌陷，但如果你的子元素设置了 height: 0、visibility: hidden、或者内容为空且没设置最小尺寸，父容器仍可能“看起来没高度”。尤其要注意 flex-direction: column 下，子项默认不拉伸，父容器高度取决于内容实际尺寸。
排查重点：
立即学习“前端免费学习笔记（深入）”；
- 检查子元素是否真的渲染了内容（
console.log或 DevTools 查看节点是否存在） - 确认没有意外的
margin-collapse导致顶部/底部外边距合并，使视觉上“消失” - 若子元素是空
div，加min-height: 1px或font-size: 0（避免行高撑开）可快速验证是否为内容缺失问题
父 div 有 height: 0 或 max-height: 0 且未触发动画/过渡
有时候高度丢失不是塌陷，而是被显式锁死了。比如 CSS 类里写了 height: 0 !important，或 JS 动态设置了 element.style.height = "0"，又忘了后续重置。
调试建议：
- 在 DevTools 的 Styles 面板中逐条关闭父容器的 height/max-height 相关声明，看是否恢复
- 检查是否有媒体查询在当前视口下生效了
height: 0 - 留意 JS 框架（如 Vue/React）的条件渲染逻辑——组件未挂载、v-if 为 false、或 useState 初始值为空数组，都可能导致父容器暂时无子节点
绝对定位子元素导致父容器“看不见”高度
如果子元素用了 position: absolute，它完全脱离文档流，父 div 不会把它计入高度计算。此时父容器高度只由其他非定位子元素决定；若其余子元素也为空或隐藏，父容器就塌了。
常见误操作：
- 以为
top: 0; left: 0;就等于“还在里面”，其实它已和父容器的布局高度解耦 - 用绝对定位做全屏遮罩，但忘了给父容器加
position: relative—— 这不影响塌陷，但会导致定位错乱，干扰判断 - 想靠绝对定位子元素撑开父容器？不行。必须额外加一个普通流内的占位元素，或用 JS 测量后手动设置父容器
min-height
真正容易被绕进去的点是：多个原因可能叠加出现。比如一个用了 float 的子元素，又被 JS 设置了 position: absolute，再叠加上媒体查询把父容器 max-height 锁死——这时候只修一处根本没用。得一层层剥开 DevTools 的 computed styles 和 layout 树，盯着每个影响高度的属性值看。
