子div设置position:absolute后父div无法自适应子元素高度的原因

底层逻辑解释 #

首先明确CSS的两个核心布局规则：

• 普通块级元素的默认高度计算，仅统计正常文档流内的子元素总高度，只有在正常流内的元素才会参与父级的高度计算。
• position: absolute的核心特性是将元素完全脱离正常文档流，该元素的尺寸、位置均不再参与父级的布局计算。

正常流场景下的高度逻辑 #

当你移除子元素的position: absolute属性时，子元素属于正常文档流元素，父元素.outer的高度会取min-height: 400px、子元素总高度（1200px）二者的最大值，也就是1200px，所以父元素会被正常撑开。

position: absolute的作用细节 #

给子元素设置position: absolute后，浏览器会执行两个关键逻辑：

1. 将该元素从正常文档流中彻底移除，父元素计算自身高度时会完全忽略这个子元素的存在，对父级的布局而言，这个子元素相当于不存在。
2. 该元素的定位基准改为最近的position属性不为static的祖先元素（也就是你示例中设置了position: relative的.outer），但这里的定位基准仅用来计算top/right/bottom/left的坐标参考，和父元素的高度计算没有任何关联。

你遇到的现象的成因 #

你的示例中父元素.outer的正常流内没有任何其他内容，所以计算高度时仅会取你设置的min-height: 400px，完全不会考虑.inner的1200px高度，最终就出现了子元素溢出父元素的现象。

代码片段 #

CSS代码 #

.outer{
    width: 100%;
    min-height: 400px;
    background-color: hotpink;
    position: relative;
}
.inner{
    position: absolute;
    background-color: palegreen;
    width: 30%;
    height: 1200px;
    top:    20%;
    left: 20%;
}

HTML代码 #

<div class="outer">
    <div class="inner">
        
    </div>
</div>

内容的提问来源于stack exchange，提问作者Uchiha Itachi