应不该该使用inline-block代替float

 

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译，整个译文带有咱们本身的理解与思想，若是译得很差或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.vanseodesign.com/css/inline-blocks/，以及做者相关信息

做者：Steven Bradley

译者：99

CSS布局建立网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,均可以看到浮动的影子.这里浮动是惟一的解决方案吗?

浮动一般表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，好比对一排图片使用浮动后对齐出现问题。Inline-block是咱们的另外一种选择。使用这种属性能够模拟部分浮动的特征，而不须要处理一些浮动带来的问题。

Inline-block不是什么新鲜话题了，估计你也用过。不过我最近才是用到这个属性。以前的几个站点上，有展现一系列照片的需求，我就用inline-block代替了浮动。

inline-block是什么？

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

1. 块级元素（block elements）,来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。
2. 行内元素（inline elements）排列方式是水平排列。
3. 行内块元素（inline-block elements）在内部他的表现相似block元素，好比他拥有block元素的width height,padding,border与margin，而外部的排列方式有相似行内元素，即水平排列，而不是像块级元素同样从上到下排列

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

inline-block和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时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
5. IE6和IE7：Ie67对此属性部分支持。若是你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。

如今咱们对块级元素设置了display：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。
2. 使用浮动：当你须要让元素环绕某一个元素时，或者须要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

上图，把一系列元素设置了浮动，由于盒子二号宽度的关系，能够发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。

浮动、inline-block和图像排列

我使用inline-block主要是为了处理垂直对齐问题。我想这也是不少人使用这个属性的缘由。我制做的不少站点都不可避免的带有一些图片列表。

若父元素中的图片等高，设置浮动就会工做正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是由于浮动后，图片脱离了文档流。

而inline-block因为未脱离文档流，不会出现这个问题。若是你想再建立一列图片时，不会受到上一列图片inline:block的影响。而你在使用时须要时刻注意清除浮动，当内容不断变化时这很容易产生bug。

这里有个更明显的例子来体现inline-block跟float的区别：

我制做了一个demo来展现一下两个写法效果的区别

上面的块级元素被设置了inline-block。因为他们没有脱离文档流，因此元素不会被某个过长的列挤上来。

inline-block导航

另外一种inline-block的适用场景：横向导航栏。一般，咱们通常会设置a元素display：block而后进行浮动来制做。有时候我会直接经过对列表元素设置display:inline来制做。若是在制做中，你须要设置不一样的display属性来处理浮动，那么inline-block不失为一种更好的解决方案。

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

若是你须要建立一个很复杂的包含行列的布局，table是你的最佳选择，不过你一样也能够考虑inline-block

总结

咱们常用浮动，但浮动并非惟一的解决方案。有时候inline-block会更好，特别是你想排列一些图片，或者横向排列连接时。

Inline-block元素带有一些行内元素的特征（横向排列），同时内部也拥有块级元素的属性。这个跟浮动很相似，只不过有些区别。

这些区别决定了你该使用哪一种方案。若是你很纠结垂直对齐问题或者横向排列元素，不妨使用inline-block。若是你须要对一个元素跟围绕他的一些元素进行更多控制，你须要浮动。

固然，table也是你处理一些问题的最佳方案。

一样我想说的，这不是什么新东西，但我会经过这篇文档还有demo来介绍一些应该使用但有些人还没有使用inline-block的场景。

很是感谢你阅读此文，但愿这篇文章能够真正在你学习使用css的时候帮到你。固然有意见跟建议你也能够提出来~

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.vanseodesign.com/css/inline-blocks/

中文译文：http://www.w3cplus.com/css/inline-blocks.html