CSS布局創(chuàng)建網(wǎng)站,浮動絕對占據(jù)了很大的比例.大塊區(qū)域如主內(nèi)容及側(cè)邊欄,以及在其中的小塊區(qū)域,都可以看到浮動的影子.這里浮動是唯一的解決方案嗎?

浮動通常表現(xiàn)正常，但有時候搞起來會很糾結(jié)。特別是處理內(nèi)部容器中的浮動，比如對一排圖片使用浮動后對齊出現(xiàn)問題。Inline-block是我們的另一種選擇。使用這種屬性可以模擬部分浮動的特征，而不需要處理一些浮動帶來的問題。

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

inline-block是什么？

Inline-block是元素display屬性的一個值。這個名字的由來是因為，display設置這個值的元素，兼具行內(nèi)元素（ inline elements）跟塊級元素（block elements）的特征。

塊級元素（block elements）,來源于CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內(nèi)元素，排列方式是水平排列。

行內(nèi)元素（inline elements）排列方式是水平排列。

行內(nèi)塊元素（inline-block elements）在內(nèi)部他的表現(xiàn)類似block元素，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內(nèi)元素，即水平排列，而不是像塊級元素一樣從上到下排列

如果你考慮了上面這些東東，你可以了解到，inline-block元素跟元素設置浮動后的表現(xiàn)差別并不是很大。對盒子設置浮動后，同樣會水平排列。雖然他們實現(xiàn)的原理不同，但內(nèi)部表現(xiàn)為塊級元素，水平排列這種需求，浮動跟inline-block都適合實現(xiàn)。

inline-block和float的區(qū)別

雖然設置浮動跟設置inline-block有些特征類似，但兩者的區(qū)別還是非常明顯的:

文檔流（Document flow）:浮動元素會脫離文檔流，并使得周圍元素環(huán)繞這個元素。而inline-block元素仍在文檔流內(nèi)。因此設置inline-block不需要清除浮動。當然，周圍元素不會環(huán)繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。

水平位置（Horizontal position）：很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內(nèi)浮動的元素。但是父元素內(nèi)元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關(guān)系）。

垂直對齊（Vertical alignment）：inline-block元素沿著默認的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向于inline-block的主要原因。

空白（Whitespace）：inline-block包含html空白節(jié)點。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現(xiàn)空白。而浮動元素會忽略空白節(jié)點，互相緊貼

IE6和IE7：Ie67對此屬性部分支持。如果你要兼容這些瀏覽器，必須解決這個問題。這不是個大問題，但值得留意一下。

現(xiàn)在我們對塊級元素設置了display：inline-block，圖片左側(cè)，元素之間出現(xiàn)空白。如果我們移除元素之間的空白（換行），就得到了圖片右側(cè)的效果。這是唯一的區(qū)別。(詳細介紹可以參閱如何解決inline-block元素的空白間距)

解決空白問題

你現(xiàn)在估計已經(jīng)躍躍欲試了，不過估計不想讓那些空白出現(xiàn)。這里有一些方法來去掉空白:

刪除html中的空白：不要讓元素之間換行，這可能比較蛋疼，但也是一種方法，特別是你元素不多的時候。

使用負邊距：你可以用負邊距來補齊空白。但你需要調(diào)整font-size，因為空白的寬度與這個屬性有關(guān)系。我認為是0.25em，但我不確定。如果有人知道可以留言告訴我。

給父元素設置font-size:0：不管空白多大，由于空白跟font-size的關(guān)系，設置這個屬性即可把空白的寬度設置為0.在實際使用的時候，你還需要給子元素重新設置font-size。

什么時候使用inline-block，什么時候使用float

什么時候使用，取決于你的設計稿跟解決方法。如果你需要文字環(huán)繞容器，那浮動是不二選擇。如果你需要居中對齊元素，inline-block是個好選擇。

最終，這可以歸結(jié)為float跟inline-block的兩種屬性作用后的區(qū)別，你需要對其作出選擇。

使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。

使用浮動：當你需要讓元素環(huán)繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

上圖，把一系列元素設置了浮動，因為盒子二號寬度的關(guān)系，可以發(fā)現(xiàn)盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

浮動、inline-block和圖像排列

我使用inline-block主要是為了處理垂直對齊問題。我想這也是很多人使用這個屬性的原因。我制作的很多站點都不可避免的帶有一些圖片列表。

若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現(xiàn)問題。這是因為浮動后，圖片脫離了文檔流。

而inline-block由于未脫離文檔流，不會出現(xiàn)這個問題。如果你想再創(chuàng)建一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時需要時刻注意清除浮動，當內(nèi)容不斷變化時這很容易產(chǎn)生bug。

這里有個更明顯的例子來體現(xiàn)inline-block跟float的區(qū)別：

我制作了一個demo來展示一下兩個寫法效果的區(qū)別

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

inline-block導航

另一種inline-block的適用場景：橫向?qū)Ш綑凇Ｍǔ?#xff0c;我們一般會設置a元素display：block然后進行浮動來制作。有時候我會直接通過對列表元素設置display:inline來制作。如果在制作中，你需要設置不同的display屬性來處理浮動，那么inline-block不失為一種更好的解決方案。

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

如果你需要創(chuàng)建一個很復雜的包含行列的布局，table是你的最佳選擇，不過你同樣也可以考慮inline-block

總結(jié)

我們經(jīng)常使用浮動，但浮動并不是唯一的解決方案。有時候inline-block會更好，特別是你想排列一些圖片，或者橫向排列鏈接時。

Inline-block元素帶有一些行內(nèi)元素的特征（橫向排列），同時內(nèi)部也擁有塊級元素的屬性。這個跟浮動很類似，只不過有些區(qū)別。

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

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

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

非常感謝你閱讀此文，希望這篇文章可以真正在你學習使用css的時候幫到你。當然有意見跟建議你也可以提出來~

譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術(shù)的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉(zhuǎn)載煩請注明出處：

什么時候使用inline-block，什么時候使用float

什么時候使用，取決于你的設計稿跟解決方法。如果你需要文字環(huán)繞容器，那浮動是不二選擇。如果你需要居中對齊元素，inline-block是個好選擇。

最終，這可以歸結(jié)為float跟inline-block的兩種屬性作用后的區(qū)別，你需要對其作出選擇。

使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。

使用浮動：當你需要讓元素環(huán)繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

上圖，把一系列元素設置了浮動，因為盒子二號寬度的關(guān)系，可以發(fā)現(xiàn)盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

浮動、inline-block和圖像排列

我使用inline-block主要是為了處理垂直對齊問題。我想這也是很多人使用這個屬性的原因。我制作的很多站點都不可避免的帶有一些圖片列表。

若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現(xiàn)問題。這是因為浮動后，圖片脫離了文檔流。

而inline-block由于未脫離文檔流，不會出現(xiàn)這個問題。如果你想再創(chuàng)建一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時需要時刻注意清除浮動，當內(nèi)容不斷變化時這很容易產(chǎn)生bug。

這里有個更明顯的例子來體現(xiàn)inline-block跟float的區(qū)別：

我制作了一個demo來展示一下兩個寫法效果的區(qū)別

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

inline-block導航

另一種inline-block的適用場景：橫向?qū)Ш綑凇Ｍǔ?#xff0c;我們一般會設置a元素display：block然后進行浮動來制作。有時候我會直接通過對列表元素設置display:inline來制作。如果在制作中，你需要設置不同的display屬性來處理浮動，那么inline-block不失為一種更好的解決方案。

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

如果你需要創(chuàng)建一個很復雜的包含行列的布局，table是你的最佳選擇，不過你同樣也可以考慮inline-block

總結(jié)

我們經(jīng)常使用浮動，但浮動并不是唯一的解決方案。有時候inline-block會更好，特別是你想排列一些圖片，或者橫向排列鏈接時。

Inline-block元素帶有一些行內(nèi)元素的特征（橫向排列），同時內(nèi)部也擁有塊級元素的屬性。這個跟浮動很類似，只不過有些區(qū)別。

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

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

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

項目demo：

????#columnContent .item_ul>li
????{?
????????flaot:left;
????????width:203px;
????????margin:3px 5px;
????????vertical-align:top;
????????text-align:left;
????????????}

效果

菜單居中和自適應需要根據(jù)頁面的寬度計算

css:???

????#columnContent .item_ul>li
????{
????????display:inline-block;
????????width:203px;
????????margin:3px 5px;
????????vertical-align:top;
????????text-align:left;
???????
????????*display:inline;???
????????zoom:1;
?????}
菜單用ul-li標簽水平排列流狀顯示，float:left也可實現(xiàn)同樣的顯示效果，但是float時撐開一個li標簽，其他li標簽會環(huán)繞，特別注意和學習float和inline-block的區(qū)別，特殊情況下利用inline-block的特殊性可以實現(xiàn)別樣的效果

上面是在實際項目中應用，要求實現(xiàn)后面一張圖的效果，起初li標簽用的是float:left，整體樣式?jīng)]問題，但是展開li標簽內(nèi)容時，其他li標簽環(huán)繞，這里又存在自適應，當頁面縮小時，每行的li標簽個數(shù)會減少，并且居中，曾經(jīng)做過自適應和居中的計算以及考慮用table布局，現(xiàn)在回過頭太悲區(qū)了，inline-block只需替換一個浮動樣式就都解決了，細節(jié)和差異理解透徹了，才能做出更好的效果和節(jié)省更多不必要的時間

總結(jié)

以上是生活随笔為你收集整理的应不应该使用inline-block代替float的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。