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

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

最佳答案

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