css中display:inline-block與float在使元素排列在一行時使用差異

在布局的時候，很多設計都需要將元素排列在一行，使元素排列在一行的方法有多種，從相容性和易用性來考慮，先介紹display:inline-block（顯示為內聯塊）和float（浮動）。

float: 浮動，聞其名而知其意：使元素浮起來，脫離文檔流，從而達到多個元素排列在一行的目的。浮動元素有哪些特徵呢？如下所示：

1. 支援寬高；

2. 在一行顯示；

3. 不設定寬度時， 寬度由內容撐開 ；

4. 會按照指定的順序移動，直到碰到浮動元素，或父級的邊界停止；

5. 元素浮動之後會使浮動元素父級高度塌陷；

6. 脫離文檔流；

7. 元素浮動之後，上下margin不再疊加；

8. 觸發BFC。

inline-block:內聯塊，即既有內嵌的部分特徵也具有區塊層級元素的特徵。如下所示：

1. 支援寬高；

2. 在一行顯示；

3. 代碼換行會解析成空格；

4. 不設定寬度時，寬度由內容撐開；

5. inline-block類型元素底部預設會有一個空隙；

6. inline-b類型元素上下margin不疊加；

7. 觸發BFC。

可以從這兩個樣式的特徵中看出，它們相同的地方在於：1.支援寬高；2.在一行顯示；3.不設定內容時，寬度由內容撐開；7,.上下margin不疊加以及8.觸發BFC。在一行顯示這一特徵，決定了這兩可以使元素排列在一行。那麼使用差異，就得從他們不同的特徵開始分析：

1. 排列方向限定 。 浮動的第4個特徵決定了它可以決定元素的排列順序。float:left：元素從左至右排列，float:right：元素從右至左排列。而display:inline-block，只能從左往右。

2. 是否脫離文檔流。浮動元素會脫離文檔流，而display:inline-block不會。所以會有這樣一個現象：當第一個浮動元素或者inline-block元素已經佔滿一行，同時給第二個元素加margin-left:-100%,第二個浮動元素會覆蓋在第二個浮動元素上面，而第二個inline-block會換行顯示並再根據margin-left進行移動；

3. 浮動元素會父級的高度塌陷。為了避免父元素的高度塌陷，一般在使用浮動的時候，都要對這一特徵進行處理：給父級設定高度或者進行清浮動處理；

4. inline-block元素底部預設有一個空隙。在網頁製作時，需要設定垂直對齊：vertical-align來進行空隙的消除；

5. inline-block類型元素html代碼換行時會產生空格，為了消除空格的影響，需要：在結構中將內嵌元素寫成一行或者在樣式中給內嵌元素父級font-size設定為0；

從上述差異分析，已經可以看出float與inline-block的優缺點：float之後，大部分情況下需要清浮動或者設定高度。display:inline-block需在不更改預設相片順序（從左至右）的情況下才可使用，而且需要清除底部空隙和左右因為代碼換行產生的空格。