子元素使用 position: absolute 或 float 脱离文档流后，父元素无法感知其尺寸，导致高度塌陷。例如，当 .child 设置为 absolute 时，.parent 因无其他常规流内容而高度为 0。解决方法包括：1. 为父元素设置 min-height 并配合 relative 定位；2. 使用 padding 或占位元素撑高父容器；3. 利用伪元素模拟子元素空间，如 .parent::before 添加不可见块级元素；4. 改用 transform 实现偏移，避免脱离文档流。核心是通过结构或样式手段恢复父元素对子元素尺寸的感知。
在使用 CSS 定位时，有时会遇到子元素脱离文档流导致父元素高度塌陷的问题。这通常出现在子元素使用了 position: absolute 或 float 的情况下，父元素无法正确感知子元素的高度，从而高度变为 0 或不符合预期。
为什么会出现高度塌陷？
当子元素设置为 position: absolute 时，它会脱离正常的文档流，父元素在计算高度时将不再考虑该子元素的尺寸。如果父元素内所有子元素都脱离了文档流，那么父元素就会“塌陷”，表现为高度为 0 或远小于实际内容所需高度。
例如：
html<div class="parent"><div class="child">我是绝对定位元素</div></div>
立即学习“前端免费学习笔记（深入）”；
.parent {
border: 1px solid #000;
background: #eee;
}
.child {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
}
此时 .parent 元素的高度会是 0，因为它没有其他未脱离文档流的内容，视觉上出现“塌陷”。
解决方法一：为父元素设置固定高度或 min-height
如果子元素布局固定，可以直接给父元素设置一个 min-height 或 height，确保其具备基本高度。
.parent {
min-height: 150px; /* 根据内容预估 */
position: relative; /* 必须设置，作为绝对定位的参考容器 */
}
这种方法简单直接，但缺乏灵活性，不适合动态内容。
解决方法二：父元素设置 position: relative 并手动控制布局
虽然 position: relative 不会阻止塌陷，但它是绝对定位子元素的常用参考容器。配合 padding 或内部留白元素，可以模拟出合适的空间。
- 给父元素添加足够的 padding 来预留空间
- 在父元素中保留一个不脱离文档流的占位元素（如空 div）来撑起高度
解决方法三：使用伪元素或额外结构占位
通过伪元素模拟子元素所占空间，使父元素保持高度。
.parent {
position: relative;
}
.parent::before {
content: '';
display: block;
height: 100px;
margin-top: 20px; /* 模拟绝对定位元素的高度和偏移 */
visibility: hidden;
}
.child {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
}
这样父元素会因伪元素的存在而拥有高度，避免塌陷，同时不影响布局效果。
解决方法四：改用非脱离文档流的定位方式
如果不需要严格的层叠控制，可考虑使用 transform 替代 absolute 定位。
.child {
transform: translate(20px, 20px);
}
transform 不会让元素脱离文档流，因此父元素仍能正常计算高度。适合用于偏移、动画等场景。
基本上就这些。关键在于理解 absolute 定位会脱离文档流，导致父元素“看不见”子元素。根据实际需求选择固定高度、占位、伪元素或变换定位方式来解决。问题不复杂，但容易忽略。
