Html 浮子上的混乱。为什么在第二个元素上设置宽度会影响浮动？

我有这个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;
}

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

.block2 {
    border:1px solid;
}

这使得：

---

为什么设置宽度会使第二个div与第一个div不并排？如果我想让第二个div并排并且有100px呢？如果我设置float:left；它会这样做，但为什么呢？

因为如果您为第二个

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

指定的宽度相同，所以如果您为第二个div更改say

150px

，它将工作

---

但是，如果在浮动第二个div之前清除浮动，则不会使该div浮动在其他1之外，请参见此

浮动是CSS定位属性

在第一个块中，您定义了“左浮动”，但没有关闭“浮动”。为此，您需要使用

clear:both

查看您的更新结果：


@MarioDeSchaepmeester伙计，等待完整的答案太糟糕了，现在没人能看到，但你的答案自原始版本以来发生了很大变化…@MarioDeSchaepmeester这就是stackoverflow的工作原理，先发布要点，然后提高你的答案的质量我知道，我经常这么做，但是你最初的回答是非常不充分的，完全无法被你现在所拥有的东西所识别。不要介意。你从-1到+1。@MarioDeSchaepmeester同意，但我做得更好：）你刚才不是已经问过了吗？Vucko，这是一个完全不同的问题。