display:inlineblock与float:left的区别

display与float是我们常用的布局方式。像display:inline-block;与float:left是我们将元素水平排列的方式。像水平导航栏就可以用这两种方式去实现。那这两种实现方式有什么区别呢&＃xff1f;

1.display: inline-block;会产生留白&＃xff0c;需要将父元素的font-size设置为0&＃xff0c;消除留白。

// html部分


• 家居
• 二手房
• 新房

使用浮动&＃xff0c;不会产生留白

.inline li{float: left
}


2.如果对多列元素进行排列&＃xff0c;如果元素不是等高&＃xff0c;浮动会导致布局错乱。而display: inline-block;则不会。

综述

1. 用display:inline-block;来实现水平列表比用float方式更容易控制&＃xff0c;需要注意的是前者会由空格符带来边距影响。

2. inline-block默认是底部对齐的&＃xff0c;要让两个元素顶部对齐&＃xff0c;需要加上一句&＃xff1a;veritcal-align:top;

3. inline-block 的宽度可以自行设置的&＃xff0c;而inline的自行设置宽度是无效的。

4. inline-block 在IE8以下有兼容问题。

   /* For IE 7 */zoom: 1;


参考资源&＃xff1a;
https://blog.csdn.net/qq_30628821/article/details/79009214
https://www.cnblogs.com/royc/p/6145346.html