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

【问题标题】：Confusion on float. Why setting width on second element affect floating?浮动的混乱。为什么在第二个元素上设置宽度会影响浮动？
【发布时间】：2012-11-03 13:37:50
【问题描述】：

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

这是什么原因：

Jsfiddle

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

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

.block2 {
    border:1px solid;
}

这是什么原因：

Jsfiddle

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

【问题讨论】：

你之前不是已经问过了吗？ stackoverflow.com/questions/13209152/…
Vucko，这是一个完全不同的问题。

标签： html css css-float

【解决方案1】：

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

Demo

编辑：更好的理解...

如果不定义宽度

------------------------------------------
               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 它将工作...Demo

但是如果你在浮动第二个 div 之前清除你的浮动，它不会使 div 除了其他 1 浮动，请参阅example

【讨论】：

@MarioDeSchaepmeester 花花公子等待完整的答案
太糟糕了，现在没人能看到它，但你的答案自原始版本以来已经发生了很大变化......
@MarioDeSchaepmeester 这就是 stackoverflow 的工作原理，先发布重点，然后提高答案的质量
我知道，我经常这样做，但是您的原始答案非常不充分，并且您现在所拥有的完全无法识别。没关系。您从 -1 变为 +1。
@MarioDeSchaepmeester 同意但我做得更好:)

【解决方案2】：

Float 是 CSS 定位属性。

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

查看您的更新结果：

DifferenceBetweenFloatLeftAndRight

jsFiddleWithClearingFloat

【讨论】：