html - 为什么在两个 float 的 div 中只包含内容？

Question

我真的很想了解 float 在 CSS 中的工作原理，但我遇到了很多困难。我尝试的越多，我就越困惑。看看这个例子:

<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

为什么第二个 block 的内容与第一个 block 并排，但容器本身却在第一个 block 的正下方并向右扩展？

如果第二个 block 的宽度更大，就会发生这种情况。如果没有，第二个区 block 就会消失。为什么会这样？为什么不是所有的第二 block 都与第一个 block 并排，而是在下面？

Answer 1

首先，当您 float 任何元素时，它会脱离文档的“正常流”。其次，总是在 float 元素上设置宽度被认为是好的。我真的不擅长解释。

Read this

And this