该不该用inline-block取代float?

请看这篇文章引用: jtyjty99999的博客

让块级元素 水平排列的通常方式是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>,使用浮动。
05-11 11:37