在佈局的時候，很多設計都需要將元素排列在一行，使元素排列在一行的方法有多種，從兼容性和易用性來考慮，先介紹display:inline-block（顯示爲內聯塊）和float（浮動）。
float: 浮動，聞其名而知其意：使元素浮起來，脫離文檔流，從而達到多個元素排列在一行的目的。浮動元素有哪些特徵呢？如下所示：
- 支持寬高；
- 在一行顯示；
- 不設置寬度時， 寬度由內容撐開 ；
- 會按照指定的順序移動，直到碰到浮動元素，或父級的邊界停止；
- 元素浮動之後會使浮動元素父級高度塌陷；
- 脫離文檔流；
- 元素浮動之後，上下margin不再疊加；
- 浮動元素默認頂部對齊；
- 觸發BFC。
inline-block:內聯塊，即既有內嵌的部分特徵也具有塊級元素的特徵。如下所示：
- 支持寬高；
- 在一行顯示；
- 代碼換行會解析成空格；
- 不設置寬度時，寬度由內容撐開；
- inline-block類型元素底部默認會有一個空隙；
- inline-block類型元素上下margin不疊加；
- inline-block可設立垂直對齊方式；
- 觸發BFC。
可以從這兩個樣式的特徵中看出，它們相同的地方在於：1.支持寬高；2.在一行顯示；3.不設置內容時，寬度由內容撐開；7,.上下margin不疊加以及8.觸發BFC。在一行顯示這一特徵，決定了這兩可以使元素排列在一行。那麼使用差異，就得從他們不同的特徵開始分析：
- 排列方向限定 。 浮動的第4個特徵決定了它可以決定元素的排列順序。float:left：元素從左至右排列，float:right：元素從右至左排列。而display:inline-block，只能從左往右。
- 是否脫離文檔流。浮動元素會脫離文檔流，而display:inline-block不會。所以會有這樣一個現象：當第一個浮動元素或者inline-block元素已經佔滿一行，同時給第二個元素加margin-left:-100%,第二個浮動元素會覆蓋在第二個浮動元素上面，而第二個inline-block會換行顯示並再根據margin-left進行移動；
- 垂直對齊方式設置。inline-block可自主設置垂直對齊方式而浮動元素僅能頂部對齊；
- 浮動元素會父級的高度塌陷。爲了避免父元素的高度塌陷，一般在使用浮動的時候，都要對這一特徵進行處理：給父級設置高度或者進行清浮動處理；
- inline-block元素底部默認有一個空隙。在網頁製作時，需要設置垂直對齊方式：vertical-align來進行空隙的消除；
- inline-block類型元素html代碼換行時會產生空格，爲了消除空格的影響，需要：在結構中將內聯元素寫成一行或者在樣式中給內聯元素父級font-size設置爲0；
從上述差異分析，已經可以看出float與inline-block的優缺點：float之後，大部分情況下需要清浮動或者設置高度且只能頂部對齊。display:inline-block需在不更改默認排列方式（從左至右）的情況下才可使用，而且需要清除底部空隙和左右因爲代碼換行產生的空格但可以有多種對齊方式。