應不應該使用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/　譯文：w3cplus