Float：Left with different display types

Question

我只是在學習一些關於顯示和浮動的知識，並且注意到當我將一個浮動值應用於所有顯示類型時，它們都表現得像一個display：inline-block。

這是沒有浮動左側的jsfiddle：

https://jsfiddle.net/j3jjpaxr/

，這裏是一個與浮動左：

https://jsfiddle.net/xhhbgsu1/

CSS：

.first { 
    background-color: #435671; 
} 

.second { 
    background-color: #135671; 
} 

.third { 
    background-color: #935671; 
} 

.inlineblock { 
    display: inline-block; 
} 

.inline { 
    display: inline; 
} 

.block { 
    display:block; 
} 

.testDiv { 
    text-align: center; 
    float:left; 
    width: 33%; 
    height: 100px; 
} 

能任何人都可以解釋爲什麼這個hap筆，我會期望內聯元素至少保持其大小？

Answer 1

對於內聯元件的寬度被忽略（MDN：「內聯元件僅佔據由限定內聯元件的標籤界定的空間。」）

另外，從MDN：

作爲浮意味着使用的塊佈局的，它修改在某些情況下所計算的值 顯示值的：

指定值：直列

已計算值：塊

...

變薄意味着，當你設置一個float到一個內聯元素，它的display值被強制block。這就是爲什麼你會得到你在你的問題中描述的效果。

https://developer.mozilla.org/it/docs/Web/CSS/float https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Answer 2

它不表現得像inline-block。

inline-block元素之間有一個默認間距。檢查你的第一個小提琴。

float使其表現得像block元素，它向左或向右漂浮。

Answer 3

浮子CSS屬性指定的元素應從 採取的正常流動，並且沿左側或右側其 容器，其中文本和內聯元素將環繞它放置。

的Src：https://developer.mozilla.org/en-US/docs/Web/CSS/float

這只是意味着一個元件，內聯或塊，就像一個內聯塊但沒有空白空間的內聯元件具有。