在我們平時工作中，經常會遇到把一些塊狀元素在一行排列顯示，這時候我們通常會用到flaot,或許會用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樹。理論上會增加性能消耗。這樣也不用像flaot那樣麻煩，需要清除flaot.
②float： 即使inline-block為布局首選，但是也有inline-block所不能涉及的一些業務需求，比如：有兩個元素，我們需要一個向左，一個向右排列，這時候我們就只能用float來實現，對於新手來說，會糾結float不好調，比較麻煩，想到達到預期效果，需要多次調整，有時候我們給元素設置了浮動，元素顯示的順序卻變了，一時搞不清楚就改變HTML中元素的前后順序等等。因為瀏覽器的解析順序是逐行解析，當設置兩個元素的右浮動時，順序在前面的元素會先被解析，他是右浮動，那么在前邊的元素就先往右浮動占位置，后邊的元素依次被解析到以后，才往右排列，這樣我們看到的順序就是反的，當弄明白原因之后，調試就方便多了。