为什么绝对 parent 得到 child 高度而相对 parent 没有？

Question

我观察到绝对定位 parent 会设置自己的高度以覆盖 child 元素，而相对定位 parent 则不会。我创建了 2 个 jsfiddles 来模拟这个：

在渲染结果上检查元素时，absolute-container div 的尺寸为 220x60，而 relative-container 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;
}

Answer 1

这是因为，如 this answer, floats are ignored when calculating the height of "normal" blocks 中所述：

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored […])

并且position: relative不会改变这一点。

但是，position: absolute 会生成 Block Formatting Context. For those、

If the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.

为什么绝对 parent 得到 child 高度而相对 parent 没有？

Why absolute parent get child height while relative parent doesn't?

html

css

position

css-position