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需在不更改預設排列方式（由左至右）的情況下才可使用，而且需要清除底部空隙和左右因為程式碼換行產生的空格。

以上是css中display:inline-block與float在使元素排列在一行時使用差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！