css - 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

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

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

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

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