绝对定位元素不参与文档流，导致父容器高度塌陷；解决方法包括显式设置父元素高度、改用flex/grid布局、添加占位元素或伪元素，以及避免滥用absolute定位。
绝对定位元素本身不参与文档流，父容器默认无法感知其尺寸，因此容易出现高度塌陷——即父元素高度为0或未按预期包裹子元素。
父容器需脱离“自动高度”依赖
普通块级父容器在子元素设为 position: absolute 后，会忽略该子元素的尺寸，导致自身高度坍缩。解决核心是：让父容器不再指望靠子元素“撑开”，而是主动控制高度。
- 给父元素显式设置
height或min-height（如min-height: 200px） - 若需自适应内容，可改用
position: relative+display: flex或grid布局替代纯 absolute 嵌套 - 避免仅靠 absolute 子元素来决定父容器视觉区域大小
用占位元素或伪元素维持父容器高度
当必须保留 absolute 子元素、又希望父容器保持一定高度时，可通过不影响布局的辅助手段“占位”：
- 在父容器内添加一个空的、非 absolute 的元素（如
），并设固定高度或继承内容高度 - 用
::after伪元素配合content: ""和display: block+height模拟占位 - 注意：占位元素需位于 absolute 元素之后（DOM顺序），且不能也设为 absolute，否则同样被忽略
检查是否误用 absolute 替代正常流布局
很多塌陷问题本质是定位滥用。absolute 应用于“脱离流、精确定位”的场景（如弹窗、图标角标、动画元素），而非常规内容排列。
立即学习“前端免费学习笔记（深入）”；
- 如果子元素本该影响父容器高度（如标题、正文、按钮组），优先用
relative、flex或grid - 若为实现覆盖效果（如遮罩层），可用
position: absolute但将父容器设为position: relative并单独控制其尺寸 - 用 Chrome DevTools 的 Layout 网格叠加功能，快速验证元素是否真的“消失”在父容器之外
不复杂但容易忽略：塌陷不是 bug，是 absolute 的设计行为；修复的关键在于厘清“谁该负责高度”——通常不是父容器被动等待，而是主动定义。
