網(wǎng)上分析float、inline-block的使用場景已經(jīng)有很多文章了，我加入我的理解總結(jié)一篇比較全而且精煉的。
共性
相鄰元素會(huì)在一行顯示不換行，直到本行排滿，就換行顯示。
區(qū)別
float：
默認(rèn)頂部對(duì)齊。如遇到上行有空白，而當(dāng)前元素大小可以擠進(jìn)去，那么這個(gè)元素會(huì)在上行補(bǔ)位排列。
float會(huì)脫離文檔流，導(dǎo)致重繪，增加瀏覽器消耗。
給float的父元素設(shè)text-align: center，不會(huì)讓float居中。
float元素之間會(huì)緊貼。
inline-block：
默認(rèn)基線對(duì)齊。當(dāng)一行內(nèi)的元素高度不一時(shí)，以高度最大的元素高度為行高，即使高度小的元素周圍有空，也不會(huì)有第二行元素上浮補(bǔ)位。由于元素的容器屬性為block，內(nèi)容為inline，所以可以視為文字，然后通過vertical設(shè)置垂直對(duì)齊方式。
inline-block不脫離文檔流。
給inline-block的父元素設(shè)text-align: center，會(huì)讓inline-block居中。
inline-block元素之間可能會(huì)包含html空白節(jié)點(diǎn)，這些節(jié)點(diǎn)會(huì)導(dǎo)致元素之間不緊貼。
推薦使用場景
float：
一、float最初設(shè)立的初衷是實(shí)現(xiàn)環(huán)繞排版，也就是說，第一個(gè)子元素設(shè)float: left或者float: right，第二個(gè)子元素保持在文檔流里，這樣第二個(gè)子元素的內(nèi)容會(huì)環(huán)繞第一個(gè)子元素排版。
二、當(dāng)若干子元素居左，若干子元素居右，建議用float。當(dāng)然，居右的元素如果用position: absolute; right: 0; top: 0;，也是可以的，不過這牽扯到父元素要設(shè)relative的問題，而且同樣是脫離文檔流，float代碼更干凈。
inline-block：
一、要設(shè)置某些子元素在一行或者多行內(nèi)顯示，尤其是排列方向一致的情況下，應(yīng)盡量用inline-block。因?yàn)閕nline-block的元素仍然在當(dāng)前文檔流里面，這樣就減少了程序?qū)OM的更改操作，因?yàn)镈OM的每一次更改，瀏覽器會(huì)重繪DOM樹，理論上會(huì)增加性能消耗。float就會(huì)增加性能消耗。
二、希望若干個(gè)元素平行排列，且在父元素中居中排列，此時(shí)可以用inline-block，且給父元素設(shè)text-align: center。還有一種辦法是給這若干個(gè)元素設(shè)一個(gè)div父元素，然后給它設(shè)寬度，并使用margin: 0 auto。然而，如果考慮到若干個(gè)元素需要在窄分辨率下?lián)Q行，那么inline-block依然是好辦法。
三、inline-block可以用一排a {display: inline-block}實(shí)現(xiàn)橫向?qū)Ш綑?，無論是居左的導(dǎo)航欄還是居右的都適用，盡管用float也可以實(shí)現(xiàn)，但是推薦用inline-block實(shí)現(xiàn)。
填坑
float：
一、浮動(dòng)導(dǎo)致父元素高度塌陷的問題：一個(gè)block父元素里有一個(gè)float元素，那么子元素盡管有高度，但是撐不起父元素的高度，父元素不主動(dòng)設(shè)置高度的話，高度默認(rèn)為0。但是父元素設(shè)定高度是不推薦的做法。
解決方案就是清除浮動(dòng)法，這個(gè)問題是老問題了，辦法很多（參見《CSS清除浮動(dòng)大全共8種方法》），現(xiàn)在無非是找一種最優(yōu)雅的辦法，不考慮IE6/IE7的話，最優(yōu)的辦法是用:after偽類，也就是聲明一個(gè)類：
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
用的時(shí)候給父元素設(shè)上 class="clearfloat" 即可。
二、換行后的float會(huì)主動(dòng)填充到前一行比較矮的元素的下面
這個(gè)問題就叫做補(bǔ)位排列，實(shí)踐中無論是瀑布流布局誕生之前還是誕生之后，這種補(bǔ)位排列都沒有任何市場，如果想避免這種排列，唯一的辦法就是給各個(gè)float元素設(shè)固定高度。如果實(shí)在不想限定float元素的高度，就只能去分析內(nèi)部的所有子元素，找到那個(gè)忽高忽低的子元素，給它設(shè)定統(tǒng)一高度即可。
inline-block：
一、空白節(jié)點(diǎn)問題，兩個(gè)inline-block元素之間會(huì)有一個(gè)縫隙，這往往是不希望見到的，解決辦法有很多，網(wǎng)上都可以搜到，不過最簡單，且符合語義的，是用注釋。例如：
<a>A</a><!--
--><a>B</a><!--
--><a>C</a><!--
--><a>D</a>
即使是壓縮代碼之后把注釋刪掉了，也不會(huì)有影響。
如果我真的需要一個(gè)縫隙呢？也不要用空白節(jié)點(diǎn)，因?yàn)樗膶挾仁遣豢煽氐模铌P(guān)鍵是代碼壓縮之后就沒了，所以你只需要先加好注釋，然后設(shè)個(gè)margin-right: xpx即可。
二、兩個(gè)相同高度的inline-block為啥有高有低？
比如：一個(gè)inline-block是font-size: 12px; line-height: 2;，另一個(gè)是font-size: 16px; line-height: 1.5;。分別分析它倆，會(huì)知道它倆占用的高度都是24px，這里沒有問題，然而，從視覺上，卻看到一個(gè)高一個(gè)低。為什么同樣的高度，會(huì)有這種現(xiàn)象？原因是上文說過的，inline-block的vertical-align是baseline，兩個(gè)元素的baseline位置不一致，導(dǎo)致了這種現(xiàn)象。
顯然，兩者保證中軸線對(duì)齊才是最美觀的，我們當(dāng)然希望中軸線對(duì)齊，那么，怎么保證它倆中軸線對(duì)齊呢？
很簡單，模仿一下float元素，讓它倆基于頂線對(duì)齊即可，也就是給它們分別設(shè)上vertical-align: top;。當(dāng)然也可以底線對(duì)齊，也就是vertical-align: bottom，道理是一樣的。
繼續(xù)：
如果第一個(gè)是inline-block，且font-size: 12px; line-height: 2;，旁邊還有一個(gè)文本元素，并沒有第二個(gè)inline-block，然后父元素是font-size: 16px; line-height: 1.5;，這時(shí)候你會(huì)發(fā)現(xiàn)父元素的高度不是設(shè)想的24px，而是26px，為什么？
也是因?yàn)関ertical-align的原因。同樣的，我們給父元素和子元素都設(shè)上vertical-align: top;或者vertical-align: bottom;，然后再看看，父元素的height值就變成了設(shè)想的24px。
所以，若干個(gè)inline-block的CSS無論是一模一樣，還是略有區(qū)別，我們現(xiàn)在都掌握了讓他們美觀對(duì)齊的方法。
再多說一句，vertical-align的值有一個(gè)middle值，表面上看這才是我們想要的水平線對(duì)齊，然而你真的把上文的top換成middle，發(fā)現(xiàn)根本不行，因?yàn)閙iddle是“元素的中垂點(diǎn)與 父元素的基線加1/2父元素中字母x的高度 對(duì)齊?！保疤勖?？所以不要用middle。
