0

我真的很想了解 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

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

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

4

2 回答 2

1

首先，当您将float任何元素从文档的“正常流程”中取出时。其次，总是在浮动元素上设置宽度被认为是好的。我真的不擅长解释。

读这个

和这个

于 2012-11-03T18:57:01.823 回答
1

这些可能会帮助你...

W3C - 视觉格式化模型 - 定位浮动：'float' 属性

W3C - 通用容器 - div 和 span 元素

于 2012-11-03T19:00:34.727 回答