當(dāng)我們需要把一些塊狀元素在一行排列顯示時(shí)复唤，我們通常會(huì)用到float或者inline-block。那么他們有什么共性和區(qū)別腾务？適用在什么場景？
共性：
-
inline-block: 是把一個(gè)元素的display設(shè)置為塊狀內(nèi)聯(lián)元素躏哩。
- inline屬性使元素內(nèi)聯(lián)展示，內(nèi)聯(lián)元素設(shè)置寬度無效揉燃，設(shè)置上下padding扫尺、margin無效。相鄰的inline元素會(huì)在一行顯示不換行炊汤，直到本行排滿為止正驻。
- block的元素始終會(huì)獨(dú)占一行，呈塊狀顯示抢腐，可設(shè)置寬高姑曙。
- 所以inline-block的元素就是寬高可設(shè)置，相鄰的元素會(huì)在一行顯示迈倍，直到本行排滿伤靠，也就是讓元素的容器屬性為block，內(nèi)容為inline啼染。
float： 設(shè)置元素的浮動(dòng)為左或者右浮動(dòng)宴合，當(dāng)設(shè)置元素浮動(dòng)時(shí)，相鄰元素會(huì)根據(jù)自身大小迹鹅，排滿一行形纺，如果父容器寬度不夠則會(huì)換行。當(dāng)我們設(shè)置了元素的浮動(dòng)時(shí)徒欣，這個(gè)元素就脫離了文檔流，相鄰元素會(huì)呈環(huán)繞裝排列蜗字。
兩者共同點(diǎn)是都可以實(shí)現(xiàn)元素在一行顯示打肝，并且可以自由設(shè)置元素大小。
區(qū)別：
inline-block: 水平排列一行挪捕，即使元素高度不一粗梭，也會(huì)以高度最大的元素高度為行高，即使高度小的元素周圍留空级零，也不回有第二行元素上浮補(bǔ)位断医。可以設(shè)置默認(rèn)的垂直對齊基線奏纪。inline-block的元素仍然在仍在文檔流中占據(jù)位置鉴嗤。
float: 讓元素脫離當(dāng)前文檔流，呈環(huán)繞狀排列序调，如遇上行有空白醉锅，而當(dāng)前元素大小可以擠進(jìn)去，這個(gè)元素會(huì)在上行補(bǔ)位排列发绢。默認(rèn)是頂部對齊硬耍。脫離文檔流垄琐。
使用場景：
inline-block： 當(dāng)我們要設(shè)置某些元素在一行顯示，并且排列方向一致的情況下经柴，我們盡可能去用inline-block狸窘。
因?yàn)閕nline-block的元素仍然在仍在文檔流中占據(jù)位置。坯认，這樣就減少了程序?qū)OM的更改操作翻擒，因?yàn)镈OM的每一次更改，瀏覽器會(huì)重繪DOM樹鹃操。會(huì)增加性能消耗韭寸。這樣也不用像flaot那樣麻煩，需要清除flaot.float： 即使inline-block為布局首選荆隘，但是也有inline-block所不能涉及的一些業(yè)務(wù)需求恩伺，比如：有兩個(gè)元素，我們需要一個(gè)向左椰拒，一個(gè)向右排列晶渠，這時(shí)候我們就只能用float來實(shí)現(xiàn)。
使用float時(shí)需要注意瀏覽器的解析順序是逐行解析燃观，當(dāng)設(shè)置兩個(gè)元素的右浮動(dòng)時(shí)褒脯，順序在前面的元素會(huì)先被解析。
