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 回答