为什么需要将两个块浮动才能对齐？

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;
}

为什么block2需要float:left;才能在block1的右边？是不是block1（float：left）的属性足够？

JsFiddle

Answer 1

默认情况下，

block2显示为块级元素，这意味着它占用整行。

float:left的右侧不一定要显示block1;如果它通过display:inline或display:inline-block显示为内联级别元素，则会显示在其兄弟旁边。

http://jsfiddle.net/8GF4B/1/

为了进一步详细解释，让我们假设您已在float:left上设置了block2：

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

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

首先发生的事情是block2将被定位在通常定位的位置。让我们找出答案。

• block1显示为块级元素
• 块级元素的呈现方式就好像它们在元素
之前和之后都有换行符一样 因此，
• block2将默认显示在第二行
上

现在block2从正常流程中取出，并尽可能向左移动......但它已经在左边缘！这导致block2出现在block1下面。

在这里查看有关内联和块级元素之间区别的详细说明：https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Answer 2

<div>元素是一个块级元素，意味着它将位于单独的行中，因此您需要float中的block2，因为它是div元素。< / p>