爲什麼需要將兩個塊左移才能對齊？

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元素。