为什么在两个浮动的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