CSS绝对定位如何引发父容器高度塌陷？脱离标准流有何影响？
- 内容介绍
- 文章标签
- 相关推荐
本文共计917个文字，预计阅读时间需要4分钟。
由于 `position: absolute` 的元素脱离文档流，其父容器在计算自身 `height` 时会忽略这些元素。这并不是 bug，而是 CSS 规范明确要求的行性行为。
常见错误现象包括：getBoundingClientRect().height 或 offsetHeight 读出来是 0，背景色/边框不显示，下方兄弟元素直接顶到顶部；DevTools 里盒模型显示 height: 0px，但视觉上子元素明明占着空间。
注意：overflow: hidden、display: flow-root、clearfix 全都无效——它们解决的是浮动（float）塌陷，和 absolute 无关。
哪些场景下父容器“本就不该被撑开”
不是所有塌陷都要修复。
本文共计917个文字，预计阅读时间需要4分钟。
由于 `position: absolute` 的元素脱离文档流，其父容器在计算自身 `height` 时会忽略这些元素。这并不是 bug，而是 CSS 规范明确要求的行性行为。
常见错误现象包括：getBoundingClientRect().height 或 offsetHeight 读出来是 0，背景色/边框不显示，下方兄弟元素直接顶到顶部；DevTools 里盒模型显示 height: 0px，但视觉上子元素明明占着空间。
注意：overflow: hidden、display: flow-root、clearfix 全都无效——它们解决的是浮动（float）塌陷，和 absolute 无关。
哪些场景下父容器“本就不该被撑开”
不是所有塌陷都要修复。