2

我有这个 HTML：

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

在一种情况下，我有这个 CSS：

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

.block2 {
    width:100px;
    border:1px solid;
}

这使得：

提琴手

第二种情况，我有这个 CSS：

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

.block2 {
    border:1px solid;
}

这使得：

提琴手

为什么设置宽度会使第二个 div 不与第一个 div 并排？如果我希望第二个 div 并排并有 100px 怎么办？如果我设置 float:left; 它会这样做，但为什么呢？

4

2 回答 2

3

因为如果你指定一个宽度到你的第二个div你需要使用float: left;它，因为它div是一个块级元素，如果你不指定一个宽度，它会占用剩余的可用空间，如果你定义一个宽度，它会如果空间可用，则在其他浮动 div 之外浮动，为了使其正确浮动，您需要使用float: right

演示

编辑：更好的理解...

如果不定义宽度

------------------------------------------
               total space                     Legend (/ - empty space)

------------- Example 1 ----------------
div1(floated left) ///////////////////////
                   ^---------------------^
                     This space will be taken 
                by the div which is without width
------------- Example 2 ----------------
div1(floated left)
div2(same size as 1 wont float unless you give float: left;)

 ------------- Example 3 ----------------
 div1(floated left) div2(besides div 1 if widths are different without giving float left)
------------------------------------------

正如您所说，如果您指定宽度，它应该向左浮动，它与div2您给div1 Reference的宽度相同，因此如果您更改说150px第二个 div 它将起作用...演示

但是，如果您在浮动第二个 div 之前清除浮动，它不会使 div 除了其他 1 浮动，请参阅此示例

于 2012-11-03T13:40:03.377 回答
0

Float是一个 CSS 定位属性。

在第一个块中，您定义了向左浮动但没有关闭浮动。为此，您需要使用clear:both;

查看您的更新结果：

左右浮动之间的差异

jsFiddleWithClearingFloat

于 2012-11-03T13:56:37.400 回答