如何强制 position:absolute 的元素调整父元素 div 的大小？

Question

简单的问题。我只想了解其中的逻辑。为什么带有 position:absolute（和 float:left 的元素）不像 position:relative 那样 "take up space"？以及如何强制具有 position:absolute 的元素调整父元素的大小 div?

View DEMO

我需要了解这个条件来解决一些问题。

<style>
    .relative,
    .absolute {
        height: auto;
        width: 200px;
        border: 1px solid black;
        margin: 10px;
    }

.relative svg {
        position: relative;
}

.absolute svg {
        position: absolute;
}
</style>


<!-- The height:auto works! -->
<div class="relative">
    <svg width="50" height="50">
        <rect width="50" height="50" style="fill:rgb(255,0,0)" />
    </svg>
</div>

<!-- The height:auto don't works -->
<div class="absolute">
    <svg width="50" height="50">
        <rect width="50" height="50" style="fill:rgb(0,0,255)" />
    </svg>
</div>

Answer 1

position: absolute 中断正常流程...

The normal flow of the document is how your elements stack one on top of each other, from the top down, in the order in which they appear in your markup.

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.

来源：http://alistapart.com/article/css-positioning-101

CSS 规格：http://www.w3.org/TR/CSS21/visuren.html

如何强制 position:absolute 的元素调整父元素 div 的大小？

How to force an element with position:absolute to resize the parent div?

html

css

height

absolute