第三期《float 与 display:inline-block的区别是什么》

介绍

HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。

1. 默认display:block属性（块级元素）

<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>

等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。

2. 默认display:inline属性（行内元素）

<span>
<a>
<strong>
<em>
<img>
<br>

等元素，其不会打断文档排布流，会在一行中一个挨一个地排列。

用float方式会带来的麻烦：

使用float方式需要注意的是，要有一个元素来包裹float元素，同时避免接下来的元素紧紧地靠近它。

另外一个麻烦是，当有一个多行水平列表，但是列表里的内容有不同的高度时，就会排的非常痛苦。

用display:inline-block;方式：

display:inline-block;方式样式化列表时，既可使得列表元素能按行挨个排列，

同时元素还能保持其块属性，比如高和宽、上下边距等。

但是对有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容：

CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。

但是在早期的IE，比如IE 7，就要做一些改变才能适应。

/* For IE 7 */
 zoom: 1;
 *display: inline;

通常，做浏览器兼容适应的CSS样式化，最好是分开独立的样式文件，然后通过条件注释将其引入。

用display:inline-block;的空白符引起的问题：

因为元素之间是行内inline修饰排列的，因此HTML中的空格符也会影响到这个修饰。也就是说，

当我们把元素的大小和顺序排列好后，如果在<li>元素之间有空格符，

这个空格符将会产生4px的边距。

综述

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

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

3. inline-block 的宽度可以自行设置的，而inline的自行设置宽度是无效的。

参考资料:

1. css之display:inline-block与float区别

微信订阅号（前端趣闻，欢迎关注）

讨论地址：github讨论地址