float：none;格式化會影響div的背景顏色？

Question

我在嘗試瞭解float和clear的行爲。出於這個原因，我已經創建了一個很小的例子(avaiable on jsfiddle)的實驗：

HTML：

<div class="left">A</div> 
<div class="custom">B</div> 
<div class="left">C</div> 
<div class="left">D</div>​ 

CSS：

div { 
    background-color: blue; 
    color: red; 
    width: 100px; 
    height: 100px; 
    margin: 3px; 
} 

.left { 
    float: left; 
} 

.custom { 
    float: none; 
}​ 

首先，我不明白爲什麼background-color: blue;指令似乎丟失B.

其次它不是我清楚，爲什麼刪除這個margin: 3px;語句結果：

預先感謝您的幫助或鏈接。

Answer 1

B指令不會丟失 - 它只是圍繞它的浮動元素將文本推到div的外部。從浮動元素去除背景顏色，你可以看到的東西更清楚一點：

http://jsfiddle.net/faq9h/3/

當您刪除的保證金（在你的第二個圖像），你實際上看到的是背景C通過B文本下方顯示。

解決這個的快速方法是添加display: inline-block到非浮動元素：

http://jsfiddle.net/faq9h/4/

那麼你的框將顯示爲ACD B.

對於理解發生了什麼： this is an excellent article。