在我們平時工作中，經常會遇到把一些塊狀元素在一行排列顯示，這時候我們通常會用到float,或許會用inline-block等等，那麼他們有什麼共性和區別？適用在什麼場景？

共性：

①inline-block: 是把一個元素的display設定為塊狀內聯元素，意思就是說，讓一個元素的容器inline展示，並且裡面的內容block展示；inline屬性使元素內聯展示，內聯元素設定寬度無效，相鄰的inline元素會在一行顯示不換行，直到本行排滿為止。block的元素始終會獨佔一行，呈塊狀顯示，可設定寬高。所以inline-block的元素就是寬高可設定，相鄰的元素會在一行顯示，直到本行排滿，也就是讓元素的容器屬性為block，內容為inline。

②float： 設定元素的浮動為左或者右浮動，當設定元素浮動時，相鄰元素會根據自身大小，排滿一行，如果父容器寬度不夠則會換行。當我們設定了元素的浮動時，這個元素就脫離了文件流，相鄰元素會呈環繞狀排列。

兩者共同點是都可以實現元素在一行顯示，並且可以自由設定元素大小。

區別：

①inline-block: 水平排列一行，即使元素高度不一，也會以高度最大的元素高度為行高，即使高度小的元素周圍留空，也不回有第二行元素上浮補位。可以設定預設的垂直對齊基線。

②float: 讓元素脫離當前文件流，呈環繞狀排列，如遇上行有空白，而當前元素大小可以擠進去，這個元素會在上行補位排列。預設是頂部對齊。

場景：

①inline-block： 當我們要設定某些元素在一行顯示，並且排列方向一致的情況下，我們儘可能去用inline-block。因為inline-block的元素仍然在當前文件流裡面，這樣就減少了程式對DOM的更改操作，因為DOM的每一次更改，瀏覽器會重繪DOM樹。理論上會增加效能消耗。這樣也不用像float那樣麻煩，需要清除float.

②float： 即使inline-block為佈局首選，但是也有inline-block所不能涉及的一些業務需求，比如：有兩個元素，我們需要一個向左，一個向右排列，這時候我們就只能用float來實現，對於新手來說，會糾結float不好調，比較麻煩，想到達到預期效果，需要多次調整，有時候我們給元素設定了浮動，元素顯示的順序卻變了，一時搞不清楚就改變HTML中元素的前後順序等等。因為瀏覽器的解析順序是逐行解析，當設定兩個元素的右浮動時，順序在前面的元素會先被解析，他是右浮動，那麼在前邊的元素就先往右浮動佔位置，後邊的元素依次被解析到以後，才往右排列，這樣我們看到的順序就是反的，當弄明白原因之後，除錯就方便多了。