首页 > 代码库 > 你是否应该用inline-block来替代Float

你是否应该用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,他们还没有弄清楚哪些需要使用行内块