CSS 基础系列：inline-blcok和float

2019 年 11 月 7 日
筆記

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;  }