div元素扩展的条件是什么？

Question

我有一个div元素，我有所有文章。文章本身就是div元素。

<div id='articleContainer'>
    <div class='article'></div>
    <div class='article'></div>
    <div class='article'></div>
</div>

这是aritcleContainer的css

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
}

在我添加新文章时，它扩展的最小条件是什么？这个例子有效但我只是想知道它为自己扩展的条件。还有其他一些例子不能自行扩展。在哪里我根本没有线索。

Answer 1

如果文章元素不是浮动元素，则包含将调整大小以包含它们。

如果文章元素是浮动元素，则它们不会影响容器的大小。您可以向容器添加overflow设置，使其包含浮动子项：

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
    overflow: hidden;
}

请注意，溢出设置不会隐藏任何内容（除非您使文章宽度超过600像素），它只是用于更改子元素在元素中的包含方式。