你是否应该用inline-block来替代Float

原作者：Steven Bradley

发布时间：2012年11月19日

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

翻译： 子毅 --------- 将JavaScript进行到底

当使用CSS开发站点布局时，浮动（float）总是做最繁重的工作。我们为大块譬如主要内容（main content）和侧边栏（sidebar）以及其内部小一些的块使用浮动（float）。浮动总是解决问题的答案吗？

通常它们都工作得很好，但是有时候却很难使用。特别是涉及到内部块，比如一个图像网格，它们不会如预期的那样排成一条线。Inline-block是另一个选择。它们会模仿一些我们所希望的浮动表现，并且消除float带来的一些问题。

inline-block并不是什么新东西，它很可能是你经常用到的，而直到最近我才使用它们。过去的几个站点我碰巧是为摄影师而建，网站自然而然地用到了图像网格，我发现我使用了inline-block来达到了float的效果

（译注：图片有链接）

什么是inline-block

Inline-block是一个属性值，我们可以将它分配给一个元素的 display属性。就像它的名字一样，它同时拥有行内元素（inline elements）和块元素（block elements）的一些特征。

• 块元素（block elements） -- 根据CSS盒模型形成盒。它们有宽度，高度，内边距，边框以及外边距，并且他们在彼此的顶部垂直堆叠。
• 行元素（inline elements）-- 不形成盒。在水平方向上，它们相邻排列。
• 行内块级元素（inline-block elements） -- 像块元素一样，它们形成盒。在外部，它们又像行元素一样水平相邻排列，而不是彼此垂直堆叠。

假如你仔细想想，被浮动元素的行为简直太离谱了。Float形成盒，但是它们也是彼此水平相邻排列，而不是垂直堆叠。它们不完全一样，但是有时候，我们真的需要在内部表现得像行元素，而在外部表现的像块元素。浮动或者 inline-block可能都适合

（译注：图片有链接）

Float和Inline-block的区别

尽管浮动和行内块有一些共同的特性，但是他们有明显的 区别

• 文档流（Document flow） -- 浮动元素完全从正常文档流中清除，并允许其他元素围绕其周围。行内块元素在文档流中。它们并不需要被清除，因此没有使用clearfix方法或者使用overflow:hidden，当然，其他元素可以围绕其周围，并且你不能通过清除一个元素使其在一个行内块元素下面。
• 水平位置（Horizontal position） -- 一个明显的例子是，不能通过在父元素上设置text-align: center来使一个浮动元素居中，事实上，你在父元素上设置的任何位置属性都不能影响一个浮动元素。行内块的内嵌部分允许他们的父元素影响它们的位置
• 垂直对齐（Vertical alignment）-- 行内块默认是基于基线对齐。而浮动是顶部对齐。你可以改变默认值，控制行内块的垂直对齐方式，但是你不能对浮动这样做。这就是为什么我使用行内块多一些的主要原因
• 空白（whitespace）-- 行内块会保留html空白。假如你有几个行内块元素在同一行上，在水平方向上，它们之间会产生空白。而浮动元素会紧挨在一起，而忽略它们之间的空白
• IE6和IE7 -- IE6和IE7不支持行内块，或者是部分支持。如果你需要支持这些浏览器，你需要找到一个解决方案，或许这并不是一个很大的问题，但是值得提及

（译注：图片有链接）

上面所有的块均被设置有display: inline。左边，在编码时元素之间有空白。右边是空白去除的情况。这就是唯一的区别

解决空白问题

某些时候，有可能你想使用行内块，但是你不想在它们之间保留空白。这里有几个方法来 解决这个问题

• 取出html空白 -- 以某种方式去除元素之间的换行符。这并不是一个优雅的解决方案，但是它可以工作，特别是你只有几个元素时
• 使用负外边距 -- 你可以使用等于空白的负外边距。你不得不通过字体大小，因为空白是基于字体大小的。我想说的是它是0.25em，但是我不是完全的确定，假如有人知道请留下评论
• 在父元素上设置字体大小为0 -- 无论什么空白的大小是多少，字体大小为0意味着空白同样等于0。通常你需要任何需要字体大小的子元素上重置字体大小。

注意：正如Matt在评论中指出，设置字体大小为0在安卓中不起作用，你可以 在CodePen中看到Matt的一个例子

什么时候使用Inline-block，什么时候使用Float

什么时候使用取决于你的设计细节，以及你想要完成的事。假如你想使文本围绕在一个元素周围，浮动是明显的答案。假如你想是一个元素居中，inline-block是更好的选择

你的选择最终归结于行内块和浮动之间的差异，并且你需要他们各自的特性。

• 使用行内块（Use inline-blocks）-- 当你需要对垂直对齐有更多的控制时，或者在水平方向定位元素位置
• 使用浮动（Use floats） -- 当你需要其他元素围绕在一个元素周围，支持低版本IE，或者不想处理水平空白问题

（译注：图片有链接）

上面的块向左浮动来创建网格。块5困在块2的后面，因为块2比行更高。当在创建一个网格图片时，这个常见的问题

浮动，行内块，网格图片

在我的例子中，使用inline-block是为了解决垂直对齐的问题。我想，这是也很多人开始使用它们时所遇到的。最近我为摄影师创建了几个站点，当然，这些站点必然到处都有 网格图片。

假如网格中所有图片都有相同的高度，浮动工作得很好。一旦不是这样，通常情况是这样的，当有张图片比本行要高时，浮动会挂起，。这是因为它们从正常文档流中被除去了。

行内块没有这个问题，因为他们仍保留在文档流中。当是时候为图片开始以一个新行时，他们自动清除上面的所有行。为了是浮动元素清除，我们需要确切知道具体那一张图片需要清除，但当是自动创建时就会造成问题。

这里使用行内块通常更有意义

我创建了一个 简单的demo来演示上面的问题，以及使用浮动和行内块得到不同的结果

上面的所有块均被设置有display: inline-block，因为它们没有从文档流中除去，没有块被上一行的块困住

行内块在导航中

另一个潜在的位置你可能会选择使用inline-block是在 水平导航中。通常我们浮动链接，然后将他们设置为块级元素。我还发现我自己设置列表项为inline，如果这里有很多inline和block值选择来使浮动工作，或许更好的解决方案是使用行内块

任何位置，你想要元素在一行或者多行中，你可能会考虑使用行内块而不是浮动。当然，一个表同样能够在相同的环境中工作。毕竟他们是使一些事物在行和列上对齐

假如你创建的东西有复杂的行和列， 一个表（无论是html或者css）可能会是最好的选择，但是简单的东西可以考虑行内块

总结

使用浮动在布局是起到很大的作用，但是它们总是我们应该使用的工具吗？有时候，行内块是更好的选择，特别是你的目标是是块在一行中，像网格图片或者水平链接列表。

行内块在外部表现为行内元素的特点，而在内部则表现为块级元素。这使得它们和浮动元素非常相似，只有几个关键的不同点。

那些不同将决定谁更适合使用。假如你在垂直对齐或者水平定位上有问题，你可能会使用一个行内块。假如你相对单个元素有更多的控制，并且其他元素怎样对它反应，你可能谁使用浮动

当然，一个表（html或者css）可能是你最终的选择取决于你所完成的事

再次提及，这并不是一个新东西，但是我想我已经为一些和我一样的人写了一篇文章和一个 demo，他们还没有弄清楚哪些需要使用行内块