CSS 基础系列：inline-block和float

1.比对：

简单比对一下div+css布局中的inline-block和float的特点，同时附上使用inline-block之后元素之间产生空隙的解决方法。

虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:

• 文档流（Document flow）:
  浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

• 水平位置（Horizontal position）：
  很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

• 垂直对齐（Vertical alignment）：
  在两个div的高度不同时，两种方式的对齐效果也不相同：
  
  图一：display:inlne-block属性修饰的元素没有脱离文档流，当然会与在正常的文档流中的元素一样采取的底端对齐方式。
  图二： float属性修饰的元素在一定程度上脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会产生如图的效果。
  区别来了！！！如果是使用display:inlne-block，则我们可以通过vertical-align来控制两个元素的对齐方式：
  我们为两个div分别添加一个属性：vertical-align:middle

<div class="myContainer">
     <div class="div1" style="display: inline-block;vertical-align: middle">
     </div>
     <div class="div2" style="display: inline-block;vertical-align: middle">
     </div>
</div>

查看一下运行效果：

如图，div1出现在了div2的居中位置。假如使用的是float，我们是没办法使div1位于div2的中间位置的。

• 空隙（Whitespace）：
  inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空隙。而浮动元素会忽略空白节点，互相紧贴。

2.总结：

什么时候使用inline-block、什么时候使用float，这取决于你的设计稿跟解决方法。通常来说，当你需要控制元素的垂直对齐跟水平排列时，使用inline-block；当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空隙问题时，使用浮动。

3.如何消除inline-block带来的空隙;

3.1 思路一：

元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。来看以下几种写法：

• 写法一/不建议使用：

<div class="demo">
    <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>

• 写法二：

<div class="demo">
    <span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span</span>
</div>

• 写法三：

<div class="demo">
    <span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span>
</div>

3.2 思路二：

取消span的结束标签，这样间隙就没有了。为了兼容IE6/IE7，最后一个标签需要闭合。

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span</span>
    </div>
.demo span{
     background:#ddd;
     display: inline-block;
}

3.3 思路三：

不管是思路一还是思路二，都只适用于写静态页面的时候，一旦HTML是后台生成，就不生效了。
这时还有一个办法：在父容器上使用font-size:0。

<div class="demo">
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
</div>
.demo {font-size: 0;}
.demo span{
        background:#ddd;
        display: inline-block;
        font-size: 14px; /*要设置相应的字号*/
}

原理：
换行和回车会给各个span之间带来空格，而空格会被当成字符处理，因此通过给父元素设置字体大小为0，则空格字符大小也为0，相当于消除了其大小。需要注意的是，一定要额外设置span中的字体大小，否则会继承父元素的0大小字体。

3.4 思路四：

上面的思路其实已经很完美，但可惜不兼容Safari，以下给出终极方案,即font-size:0配合letter-space:-N px。

.finally-solve {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}