float: left; margin: 0 auto; display:inline-block;三者的之间的纠葛

1.  float:left; 和 margin: 0 auto；

float在w3c给出的定义是：浮动元素将生成块级框，按指定的方向浮动，且不论它本身的何种元素etc...

那么float的特性简单的讲就是脱离当前的文档留，跑到容器的边缘，或者另一个float box的边上，一行放不下就放下一行。

因此，margin值在指定为auto或者0，在gui渲染时会被当做0处理，当然你具体指定数值则是可以的。

哦，插一句，margin: 0 auto;对的块级元素有效！ 都float了，用个毛线的margin: 0 auto;.....

ps：想要了解margin：auto 0为什么会居中，可以看下这篇文章margin

2. float: left; 和 display: inline-block;

display:inline-block的元素外部表现为行内元素，横向排列，内部则表现为块级元素；

看了网上终结的两者的区别大体如下：

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

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

2.3 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。

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

• 使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
• 使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

  
  

  具体可以看下（应不应该使用inline-block代替float）这篇文章， 还给出了这个demo可以参考。

  
  

  3.  margin: 0 auto; 和display: inline-block;

  同上解释，display: inline-block; 元素外部表现为行内元素，margin: 0 auto;这种块级元素的属性又怎么会有效果, 假如你要margin：0 auto的块居中，改成display: table即可，或者父集元素text-align: center;也可以