爲什麼在兩個浮動div只是內容被包裝？

Question

我真的很想學習如何在CSS中使用float，而且我遇到了很多困難。我試驗得越多，我就越困惑。看看這個例子：

<div class = "block1">hola</div> 
<div class = "block2">hola</div> 

.block1 { 
    width:100px; 
    border:1px solid; 
    float: left; 
    height:400px; 
} 

.block2 { 
    width:300px; 
    border:1px solid; 
    background-color:red; 
} 

jsFiddle

爲什麼第二塊內容由第一次塊的端獲取的一面，但容器本身是正確的下第一模塊和擴展到了吧？

如果第二個塊的寬度更大，就會發生這種情況。如果不是，第二個塊就是在下面。爲什麼會發生？爲什麼不是所有的第二塊都和第一塊塊並排放置，而是放在哪裏呢？

Answer 1

首先，當你float任何元素它被從文檔的「正常流程」中取出。其次，在浮動元素上始終設置寬度被認爲是很好的。我解釋真的很糟糕。

Read this

And this

Answer 2

這些可以幫助你......

W3C - Visual formatting model - Positioning the float: the 'float' property

W3C - Generic containers - the div and span elements