div元素擴展的條件是什麼？

Question

我有一個div元素，我有所有的文章。文章本身是div元素。

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

這裏是aritcleContainer

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

的CSS什麼是最小條件爲它擴大，因爲我添加新文章？這個例子很有用，但我只想知道它自身擴展的條件。還有其他一些不能自行擴展的例子。我根本沒有線索。

Answer 1

如果文章元素不是浮動元素，則包含將調整大小以包含它們。

如果文章元素是浮動元素，它們不會影響容器的大小。您可以添加overflow設置的容器，使之包含流動兒童：

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

注意溢出設置不會隱瞞任何事情（除非你做的文章寬於600個像素），它只是用來改變如何孩子被包含在元素內。