浅谈float和display:inline-block

1、首先先解释下display的几个属性：inline,block,inline-block;

(1)inline:

      a、把元素变成行内元素，也就是它可以和其它的元素共占据一行。

      b、元素的大小由其内容自动撑开，其宽高是不可修改的。

      c、可以使用margin、padding,top,bottom产生边距。

      eg:

  <span>...</span>

  <a>...</a>  

  <em>...</em>  

  <input>...</input>  

  <textarea>...</textarea>  

  <select>...</select>  

(2)block:

  a、把元素变成块级元素，让他独占一行，在没有对其设置自身宽度的时候，他会默认填满父元素的宽度。 

  b、可以对元素设置宽高属性。

  c、与inline属性不同，可以对其设置margin，padding，以及top，bottom.left,right产生边距效果。

  eg:

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

(3)inline-block:

inline-block可以用一个表达式来理解他：

inline-block=inline+block;

它相当于结合了inline属性和block属性，可以说他是不独占一行的块级元素也不为过。

我们知道ul，li的默认display属性是block,接下来用实例来理解：

我们未对li设置display: inline-block的时候，每个li默认独占一行。如下：

我们对li元素加上display: inline-block后，效果如下：

这时候li元素就变成了可以在一行内显示的块元素，看看这个效果，大家是不是觉得有点跟浮动float差不多呢？没错，是跟浮动差不多，但是二者还是有明显的区别的，为了效果更直观，我们给第二个和第四个li元素给一个不同的背景色，然后和浮动的进行对比，效果很直观。

我们发现二者有明显的区别，使用inline-block 的方式每个li元素之间明显有间隙，间隙为4像素，这个问题是由于换行引起的，这是结束标签后的回车符(空白符)造成的。解除这个缺点的方法，就是对其父元素添加font-size:0，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙 ，现在这种方法已兼容各种浏览器。

那么问题来了，有些宝宝会问，我到底使用浮动呢还是display-inline?我觉得这个要根据实际情况来定，像横向布局的，就用display:inline-block;而浮动布局真正适合的类型是文字的环绕布局。