Inline-block是元素display屬性的一個值。這個名字的由來是因為，可以簡單的解釋為inline+block ；display設(shè)置這個值的元素，兼具行內(nèi)元素（ inline elements）跟塊級元素（block elements）的特征。塊級元素（block elements）來源于CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內(nèi)元素（inline elements）排列方式是水平排列。行內(nèi)塊元素（inline-block elements）在內(nèi)部他的表現(xiàn)類似block元素，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內(nèi)元素，即水平排列，而不是像塊級元素一樣從上到下排列。因此inline-block元素跟元素設(shè)置浮動后的表現(xiàn)差別并不是很大。對盒子設(shè)置浮動后，同樣會水平排列。雖然他們實現(xiàn)的原理不同，但內(nèi)部表現(xiàn)為塊級元素，水平排列這種需求，浮動跟inline-block都適合實現(xiàn)。

如何從兩者之間進(jìn)行選擇取決于你的設(shè)計稿跟解決方法。如果你需要文字環(huán)繞容器，那浮動是不二選擇。因為浮動元素會脫離文檔流，并使得周圍元素環(huán)繞這個元素。而inline-block元素仍在文檔流內(nèi)；如果你需要居中對齊元素，inline-block是個好選擇，很明顯你不能通過給父元素設(shè)置text-align:center讓浮動元素居中。事實上定位類屬性設(shè)置到父元素上，均不會影響父元素內(nèi)浮動的元素。但是父元素內(nèi)元素如果設(shè)置了display：inline-block，則對父元素設(shè)置一些定位屬性會影響到子元素。

使用inline-block：當(dāng)你需要控制元素的垂直對齊跟水平排列時，使用inline-block。
使用浮動：當(dāng)你需要讓元素環(huán)繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

對于圖片列表來說。若父元素中的圖片等高，設(shè)置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現(xiàn)問題。這是因為浮動后，圖片脫離了文檔流。而inline-block由于未脫離文檔流，不會出現(xiàn)這個問題。如果你想再創(chuàng)建一列圖片時，不會受到上一列圖片inline:block的影響，因此也不需要清除浮動。而你在使用附送時則需要時刻注意清除浮動，當(dāng)內(nèi)容不斷變化時這很容易產(chǎn)生bug。

對比如下：
 
上圖，把一系列元素設(shè)置了浮動，因為盒子二號寬度的關(guān)系，可以發(fā)現(xiàn)盒子五號被擠進(jìn)去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。
 
上面的塊級元素被設(shè)置了inline-block。由于他們沒有脫離文檔流，所以元素不會被某個過長的列擠上來。

最新評論