Question

我有这个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怎么办？如果我设置浮动：左;它做到了，但为什么呢？

Answer 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 Reference给div1的宽度一样宽，所以如果你改变了说150px代表第二个div它会起作用...... Demo

但是如果你在浮动第二个div之前清除你的花车它不会使div漂浮在另一个之外，请参见example

Answer 2

Float 是一个CSS定位属性。

在第一个区块中，您已定义浮动左侧但未关闭浮动。为此你需要使用clear:both;

查看更新后的结果：

DifferenceBetweenFloatLeftAndRight

jsFiddleWithClearingFloat

对浮动的困惑。为什么设置第二个元素的宽度会影响浮动

2 个答案: