網上分析float、inline-block的使用場景已經有很多文章了，我加入我的理解總結一篇比較全而且精煉的。

共性

相鄰元素會在一行顯示不換行，直到本行排滿，就換行顯示。

區別

float：

默認頂部對齊。如遇到上行有空白，而當前元素大小可以擠進去，那么這個元素會在上行補位排列。

float會脫離文檔流，導致重繪，增加瀏覽器消耗。

給float的父元素設text-align: center，不會讓float居中。

float元素之間會緊貼。

inline-block：

默認基線對齊。當一行內的元素高度不一時，以高度最大的元素高度為行高，即使高度小的元素周圍有空，也不會有第二行元素上浮補位。由于元素的容器屬性為block，內容為inline，所以可以視為文字，然后通過vertical設置垂直對齊方式。

inline-block不脫離文檔流。

給inline-block的父元素設text-align: center，會讓inline-block居中。

inline-block元素之間可能會包含html空白節點，這些節點會導致元素之間不緊貼。

推薦使用場景

float：

一、float最初設立的初衷是實現環繞排版，也就是說，第一個子元素設float: left或者float: right，第二個子元素保持在文檔流里，這樣第二個子元素的內容會環繞第一個子元素排版。

二、當若干子元素居左，若干子元素居右，建議用float。當然，居右的元素如果用position: absolute; right: 0; top: 0;，也是可以的，不過這牽扯到父元素要設relative的問題，而且同樣是脫離文檔流，float代碼更干凈。

inline-block：

一、要設置某些子元素在一行或者多行內顯示，尤其是排列方向一致的情況下，應盡量用inline-block。因為inline-block的元素仍然在當前文檔流里面，這樣就減少了程序對DOM的更改操作，因為DOM的每一次更改，瀏覽器會重繪DOM樹，理論上會增加性能消耗。float就會增加性能消耗。

二、希望若干個元素平行排列，且在父元素中居中排列，此時可以用inline-block，且給父元素設text-align: center。還有一種辦法是給這若干個元素設一個div父元素，然后給它設寬度，并使用margin: 0 auto。然而，如果考慮到若干個元素需要在窄分辨率下換行，那么inline-block依然是好辦法。

三、inline-block可以用一排a {display: inline-block}實現橫向導航欄，無論是居左的導航欄還是居右的都適用，盡管用float也可以實現，但是推薦用inline-block實現。

填坑

float：

一、浮動導致父元素高度塌陷的問題：一個block父元素里有一個float元素，那么子元素盡管有高度，但是撐不起父元素的高度，父元素不主動設置高度的話，高度默認為0。但是父元素設定高度是不推薦的做法。

解決方案就是清除浮動法，這個問題是老問題了，辦法很多（參見《CSS清除浮動大全共8種方法》），現在無非是找一種最優雅的辦法，不考慮IE6/IE7的話，最優的辦法是用:after偽類，也就是聲明一個類：

.clearfloat:after {
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}

用的時候給父元素設上 class="clearfloat" 即可。

二、換行后的float會主動填充到前一行比較矮的元素的下面

這個問題就叫做補位排列，實踐中無論是瀑布流布局誕生之前還是誕生之后，這種補位排列都沒有任何市場，如果想避免這種排列，唯一的辦法就是給各個float元素設固定高度。如果實在不想限定float元素的高度，就只能去分析內部的所有子元素，找到那個忽高忽低的子元素，給它設定統一高度即可。

inline-block：

一、空白節點問題，兩個inline-block元素之間會有一個縫隙，這往往是不希望見到的，解決辦法有很多，網上都可以搜到，不過最簡單，且符合語義的，是用注釋。例如：

   <a>A</a><!--
--><a>B</a><!--
--><a>C</a><!--
--><a>D</a>

即使是壓縮代碼之后把注釋刪掉了，也不會有影響。

如果我真的需要一個縫隙呢？也不要用空白節點，因為它的寬度是不可控的，最關鍵是代碼壓縮之后就沒了，所以你只需要先加好注釋，然后設個margin-right: xpx即可。

二、兩個相同高度的inline-block為啥有高有低？

比如：一個inline-block是font-size: 12px; line-height: 2;，另一個是font-size: 16px; line-height: 1.5;。分別分析它倆，會知道它倆占用的高度都是24px，這里沒有問題，然而，從視覺上，卻看到一個高一個低。為什么同樣的高度，會有這種現象？原因是上文說過的，inline-block的vertical-align是baseline，兩個元素的baseline位置不一致，導致了這種現象。

顯然，兩者保證中軸線對齊才是最美觀的，我們當然希望中軸線對齊，那么，怎么保證它倆中軸線對齊呢？

很簡單，模仿一下float元素，讓它倆基于頂線對齊即可，也就是給它們分別設上vertical-align: top;。當然也可以底線對齊，也就是vertical-align: bottom，道理是一樣的。

繼續：

如果第一個是inline-block，且font-size: 12px; line-height: 2;，旁邊還有一個文本元素，并沒有第二個inline-block，然后父元素是font-size: 16px; line-height: 1.5;，這時候你會發現父元素的高度不是設想的24px，而是26px，為什么？

也是因為vertical-align的原因。同樣的，我們給父元素和子元素都設上vertical-align: top;或者vertical-align: bottom;，然后再看看，父元素的height值就變成了設想的24px。

所以，若干個inline-block的CSS無論是一模一樣，還是略有區別，我們現在都掌握了讓他們美觀對齊的方法。

再多說一句，vertical-align的值有一個middle值，表面上看這才是我們想要的水平線對齊，然而你真的把上文的top換成middle，發現根本不行，因為middle是“元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊。”，蛋疼么？所以不要用middle。