應不該該使用inline-block代替float

CSS佈局建立網站,浮動絕對佔據了很大的比例.大塊區域如主內容及側邊欄,以及在其中的小塊區域,均可以看到浮動的影子.這裏浮動是惟一的解決方案嗎?

浮動一般表現正常，但有時候搞起來會很糾結。特別是處理內部容器中的浮動，好比對一排圖片使用浮動後對齊出現問題。Inline-block是咱們的另外一種選擇。使用這種屬性能夠模擬部分浮動的特徵，而不須要處理一些浮動帶來的問題。

Inline-block不是什麼新鮮話題了，估計你也用過。不過我最近纔是用到這個屬性。以前的幾個站點上，有展現一系列照片的需求，我就用inline-block代替了浮動。

inline-block是什麼？

Inline-block是元素display屬性的一個值。這個名字的由來是由於，display設置這個值的元素，兼具行內元素（ inline elements）跟塊級元素（block elements）的特徵。

1.  塊級元素（block elements）,來源於CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內元素，排列方式是水平排列。
2.  行內元素（inline elements）排列方式是水平排列。
3.  行內塊元素（inline-block elements）在內部他的表現相似block元素，好比他擁有block元素的width height,padding,border與margin，而外部的排列方式有相似行內元素，即水平排列，而不是像塊級元素同樣從上到下排列

若是你考慮了上面這些東東，你能夠了解到，inline-block元素跟元素設置浮動後的表現差異並非很大。對盒子設置浮動後，一樣會水平排列。雖然他們實現的原理不一樣，但內部表現爲塊級元素，水平排列這種需求，浮動跟inline-block都適合實現。

inline-block和float的區別

雖然設置浮動跟設置inline-block有些特徵相似，但二者的區別仍是很是明顯的:

1.  文檔流（Document flow）:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。所以設置inline-block不須要清除浮動。固然，周圍元素不會環繞這個元素，你也不可能經過清除inline-block就讓一個元素跑到下面去。
2.  水平位置（Horizontal position）：很明顯你不能經過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。可是父元素內元素若是設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這仍是由於浮動元素脫離文檔流的關係）。
3.  垂直對齊（Vertical alignment）：inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你能夠經過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要緣由。
4.  空白（Whitespace）：inline-block包含html空白節點。若是你的html中一系列元素每一個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
5.  IE6和IE7：Ie67對此屬性部分支持。若是你要兼容這些瀏覽器，必須解決這個問題。這不是個大問題，但值得留意一下。

如今咱們對塊級元素設置了display：inline-block，圖片左側，元素之間出現空白。若是咱們移除元素之間的空白（換行），就獲得了圖片右側的效果。這是惟一的區別。(詳細介紹能夠參閱如何解決inline-block元素的空白間距)

解決空白問題

你如今估計已經躍躍欲試了，不過估計不想讓那些空白出現。這裏有一些方法來去掉空白:

1.  刪除html中的空白：不要讓元素之間換行，這可能比較蛋疼，但也是一種方法，特別是你元素很少的時候。
2.  使用負邊距：你能夠用負邊距來補齊空白。但你須要調整font-size，由於空白的寬度與這個屬性有關係。我認爲是0.25em，但我不肯定。若是有人知道能夠留言告訴我。
3.  給父元素設置font-size:0：無論空白多大，因爲空白跟font-size的關係，設置這個屬性便可把空白的寬度設置爲0.在實際使用的時候，你還須要給子元素從新設置font-size。

何時使用inline-block，何時使用float

何時使用，取決於你的設計稿跟解決方法。若是你須要文字環繞容器，那浮動是不二選擇。若是你須要居中對齊元素，inline-block是個好選擇。

最終，這能夠歸結爲float跟inline-block的兩種屬性做用後的區別，你須要對其做出選擇。

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

上圖，把一系列元素設置了浮動，由於盒子二號寬度的關係，能夠發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

浮動、inline-block和圖像排列

我使用inline-block主要是爲了處理垂直對齊問題。我想這也是不少人使用這個屬性的緣由。我製做的不少站點都不可避免的帶有一些圖片列表。

若父元素中的圖片等高，設置浮動就會工做正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是由於浮動後，圖片脫離了文檔流。

而inline-block因爲未脫離文檔流，不會出現這個問題。若是你想再建立一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時須要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。

這裏有個更明顯的例子來體現inline-block跟float的區別：

我製做了一個demo來展現一下兩個寫法效果的區別

上面的塊級元素被設置了inline-block。因爲他們沒有脫離文檔流，因此元素不會被某個過長的列擠上來。

inline-block導航

另外一種inline-block的適用場景：橫向導航欄。一般，咱們通常會設置a元素display：block而後進行浮動來製做。有時候我會直接經過對列表元素設置display:inline來製做。若是在製做中，你須要設置不一樣的display屬性來處理浮動，那麼inline-block不失爲一種更好的解決方案。

當你須要將元素排列成一行或者多行時，更傾向於考慮使用inline-block代替float。固然，直接使用table也是一種方法，他畢竟是專門用來處理橫向與縱向排列的元素的。

若是你須要建立一個很複雜的包含行列的佈局，table是你的最佳選擇，不過你一樣也能夠考慮inline-block

總結

咱們常用浮動，但浮動並非惟一的解決方案。有時候inline-block會更好，特別是你想排列一些圖片，或者橫向排列連接時。

Inline-block元素帶有一些行內元素的特徵（橫向排列），同時內部也擁有塊級元素的屬性。這個跟浮動很相似，只不過有些區別。

這些區別決定了你該使用哪一種方案。若是你很糾結垂直對齊問題或者橫向排列元素，不妨使用inline-block。若是你須要對一個元素跟圍繞他的一些元素進行更多控制，你須要浮動。

固然，table也是你處理一些問題的最佳方案。

一樣我想說的，這不是什麼新東西，但我會經過這篇文檔還有demo來介紹一些應該使用但有些人還沒有使用inline-block的場景。

很是感謝你閱讀此文，但願這篇文章能夠真正在你學習使用css的時候幫到你。固然有意見跟建議你也能夠提出來~

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請註明出處：

英文原文：http://www.vanseodesign.com/css/inline-blocks/

中文譯文：http://www.w3cplus.com/css/inline-blocks.html