html - 为什么两个块需要向左浮动才能对齐？

Question

假设我有这个 HTML：

​&lt;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) 的属性还不够吗？

提琴手

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 被从正常流中取出，并尽可能向左移动......但它已经靠左边缘了！这导致块 2 显示在块 1 下方。

在这里查看内联元素和块级元素之间区别的一个很好的解释：https ://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Answer 2

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