为什么绝对定位的父元素可以获取子元素高度，而相对定位的父元素不行？

Question

我发现绝对定位的父元素会将自身高度设为覆盖子元素，而相对定位的父元素则不会。我创建了两个jsfiddles来模拟这个情况：

绝对定位: https://jsfiddle.net/kc1g7v9s/ 相对定位: https://jsfiddle.net/smy5q8Ld/ 当查看渲染结果的元素时，绝对定位容器div的尺寸为220x60，而相对定位容器div的尺寸为689x0。

为什么会这样？我并没有特别想要实现什么，只是对这种行为感到好奇。

附上代码： 绝对定位：

<div class="absolute-container">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

.child1, .child2 {
    width: 100px;
    height: 60px;
    background-color: grey;
    margin-right: 10px;
}
.child1 {
    float: left;
}

.child2 {
    float: right;
}

.absolute-container {
    position: absolute;
    clear: both;
}

相关：

<div class="relative-container">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

.child1, .child2 {
    width: 100px;
    height: 60px;
    background-color: grey;
    margin-right: 10px;
}
.child1 {
    float: left;
}

.child2 {
    float: right;
}

.relative-container {
    position: relative;
    clear: both;
}

- Boyang

Answer 1

这是因为，如this answer所解释的那样，在计算“正常”块的高度时会忽略浮动元素：

只有处于正常流中的子元素才会被考虑在内（即浮动元素和绝对定位元素都会被忽略[...]）

“position: relative”并不改变这一点。然而，“position: absolute”会产生一个块级格式化上下文。对于那些元素而言,

如果该元素有任何浮动后代元素，其底部边距边缘低于该元素的底部内容边缘，则高度将增加以包括这些边缘。

- Oriol