display與float是我們常用的佈局方式。像display:inline-block;與float:left是我們將元素水平排列的方式。像水平導航欄就可以用這兩種方式去實現。那這兩種實現方式有什麼區別呢？

1.display: inline-block;會產生留白，需要將父元素的font-size設定為0，消除留白。

// html部分
<ul class="inline">
   <li>家居</li>
   <li>二手房</li>
   <li>新房</li>
 </ul>
 
 // css 部分
 .inline li {
    display: inline-block;
  }
 

使用浮動，不會產生留白

.inline li{
	float: left
}

2.如果對多列元素進行排列，如果元素不是等高，浮動會導致佈局錯亂。而display: inline-block;則不會。

綜述

1. 用display:inline-block;來實現水平列表比用float方式更容易控制，需要注意的是前者會由空格符帶來邊距影響。

2. inline-block預設是底部對齊的，要讓兩個元素頂部對齊，需要加上一句：veritcal-align:top;

3. inline-block 的寬度可以自行設定的，而inline的自行設定寬度是無效的。

4. inline-block 在IE8以下有相容問題。

    /* For IE 7 */
     zoom: 1;
   

參考資源：
https://blog.csdn.net/qq_30628821/article/details/79009214
https://www.cnblogs.com/royc/p/6145346.html