为什么需要将两个块左移才能对齐？

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

为什么块2需要有float:left;以是块1的对不对？ block1（float：left）的属性不够吗？

JsFiddle

Answer 1

block2被显示为缺省一个块级元素，这意味着它占用了一整行。

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

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

为了更详细地解释，让我们假设你已经在block2，而不是设置float:left：

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

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

会发生的是，块2将被定位的第一件事，它通常会被定位。让我们找出在哪里。

• BLOCK1被显示为块级元素，就好像它们之前和元件后
• BLOCK2因此将默认显示在第二行
有换行符
• 块级元素呈现

现在block2被取出正常流程，并尽可能向左移动，但它已经在左边缘！这导致块2显示在块1下面。

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

Answer 2

<div>元素是块级元素意味着这将是其单独的线，所以你需要在float您block2，因为它是一个div元素。