什么时候inline-block替换float？

『inline-block是什么？

Inline-block是元素display属性的一个值。display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。

.块级元素（block elements）,来源于CSS盒子模型。 块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。

.行内元素（inline elements）排列方式是水平排列。

.行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的width height,padding,border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列.』

inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后，同样会水平排列。虽然他们实现的原理不同，但内部表现为块级元素，水平排列这种需求，浮动跟inline-block都适合实现。

『inline-block和float的区别

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

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

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

垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线（！important），但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

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

IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。』

对块级元素设置了display：inline-block，图片左侧，元素之间出现空白。如果我们移除元素之间的空白（换行），就得到了图片右侧的效果。

『解决空白问题

你现在估计已经跃跃欲试了，不过估计不想让那些空白出现。这里有一些方法来去掉空白:

删除html中的空白：不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。

使用负边距：你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。maybe 0.25em?

给父元素设置font-size:0：不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0. 在实际使用的时候，你还需要给子元素重新设置font-size。』

『什么时候使用inline-block，什么时候使用float

什么时候使用，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。

使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。

使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。』

『使用场景一：浮动、inline-block和图像排列（inline-block主要是为了处理垂直对齐问题。）

float容易出现的脱离了文档流的不整齐

display:inline-block不脱离文档流的排列

使用场景二：inline-block导航（横向导航栏）

当你需要将元素排列成一行或者多行时，更倾向于考虑使用inline-block代替float。当然，直接使用table也是一种方法，他毕竟是专门用来处理横向与纵向排列的元素的。

如果你需要创建一个很复杂的包含行列的布局，table是你的最佳选择，不过你同样也可以考虑inline-block。』

总结：如果你很纠结垂直对齐问题或者横向排列元素，不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制，你需要浮动。