當浮動應用時css顯示屬性

Question

浮動元素時，不同的顯示屬性如何影響佈局？或者說，有什麼區別，如果有的話，這些類之間：

div.foo { 
    display: block; 
    float: left; 
} 

div.foo2 { 
    display: inline; 
    float: left; 
} 

div.foo3 { 
    display: inline-block; 
    float: left; 
} 

編輯：

如果有依據規範沒有差異，然後做瀏覽器的某些過時的版本（啊哈，IE ）呈現他們不同？

Answer 1

如果我正確讀取spec，實踐證實了這一點，在元素上設置float: left或right覆蓋的display財產反正和力量display: block（雖然有特殊性，見下文），這樣就會有你的三個例子之間沒有什麼區別：

左 該元件產生被向左浮動塊框。內容在框的右側從頂部開始（受「清除」屬性限制）。

right 與'left'類似，只是盒子向右浮動，內容在盒子左側從頂部開始流動。

無 箱子沒有浮動。

不同於正常display: block雖然設置float決定中關於自己的行爲，以寬了覆蓋display屬性：如果沒有明確地指定寬度，浮動元素將採取儘可能多的寬度，因爲它需要，而不是自動佔用100％寬度的標準塊元素行爲。