该不该用inline-block取代float? inline和float的区别?

该不该用inline-block取代float?

让块级元素水平排列的通常方式是float, 但是float可能会带来很多意外的问题

可以考虑用inline-block, 既能实现同样的效果, 但是还能避免 float 的问题:

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

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

inline和float在理论上的区别?

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

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

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

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

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

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

如果你考虑了上面这些东东，你可以了解到，inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后，同样会水平排列。虽然他们实现的原理不同，但内部表现为块级元素，水平排列这种需求，浮动跟inline-block都适合实现。

解决空白问题

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

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

2. 使用负边距：你可以用负边距来补齐空白。(使用负边距的一个重要 理由就是: 为了位置上的调整, 使得负边距能够补齐空白)...     但你需要调整font-size，因为空白的宽度与这个属性有关系。我认为是0.25em，但我不确定。如果有人知道可以留言告诉我。

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

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

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

最终，这可以归结为float跟inline-block的两种属性作用后的区别，你需要对其作出选择。

1.**使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。// 要控制对齐问题时, 请使用 inline-block! **

2. 使用浮动：<font color='blue'>当你需要让元素环绕某一个元素时</font>，或者需要支持旧版本ie，或者<font color='blue'>不想处理inline-block带来的空白问题时</font>，使用浮动。