应该使用 inline-block 来代替 float 吗?

转载 2016年05月30日 16:25:17

本文由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代替了浮动。

box module

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都适合实现。

box module

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对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。

box module

现在我们对块级元素设置了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带来的空白问题时,使用浮动。

box module

上图,把一系列元素设置了浮动,因为盒子二号宽度的关系,可以发现盒子五号被挤进去了(这些元素都脱离了文档流),这是图片排列中很常见的问题。

浮动、inline-block和图像排列

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

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

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

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

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

box module

上面的块级元素被设置了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

inline-block和float应区别对待

参考资料:http://www.w3cplus.com/css/inline-blocks.htmlinline-block和float大战已经持续了一段时间,有的人钟爱float,整个页面都用的是f...
  • sinat_27088253
  • sinat_27088253
  • 2016-05-20 10:10:37
  • 805

CSS 用display:inline-block代替float: left排版注意事项

此处显示新 Div1标签的内容      此处显示新 Div2标签的内容      此处显示新 Div3标签的内容 效果如图: 此处显示新 Div1标签的内容   此处显示新 Div2...
  • tel15277169530
  • tel15277169530
  • 2016-05-30 11:17:58
  • 1482

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

当使用CSS开发站点布局时,浮动(float)总是做最繁重的工作。我们为大块譬如主要内容(main content)和侧边栏(sidebar)以及其内部小一些的块使用浮动(float)。浮动总是解决问...
  • tianxuezhi_s
  • tianxuezhi_s
  • 2014-05-15 11:56:53
  • 950

display:inline-block 和float:left 的区别

转自于 : http://www.cnblogs.com/royc/p/6145346.html display:inline-block 和float:left 的区别   dis...
  • sd19871122
  • sd19871122
  • 2017-02-07 10:17:56
  • 1030

CSS之使用display:inline-block与float布局的区别

1.解释一下display的几个常用的属性值,inline , block, inline-blockinline:使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行....
  • weixin_40204906
  • weixin_40204906
  • 2018-03-13 10:22:47
  • 23

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

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2014-12-09 05:43:41
  • 414

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

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。特别是处理...
  • qq_37860930
  • qq_37860930
  • 2017-06-30 15:02:39
  • 275

inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。特别是...
  • yuedong2012
  • yuedong2012
  • 2016-04-11 17:57:23
  • 119

第三期《float 与 display:inline-block的区别是什么》

介绍 HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等。 ...
  • qq_30628821
  • qq_30628821
  • 2018-01-09 09:30:00
  • 78

display:inline、block、inline-block的区别,与下文float相关。

display:block就是将元素显示为块级元素.   block元素的特点是:   总是在新行上开始;   高度,行高以及顶和底边距都可控制;   宽度缺省是它的容器的100%,除非设...
  • zxf13598202302
  • zxf13598202302
  • 2016-06-06 15:12:21
  • 322
收藏助手
不良信息举报
您举报文章:应该使用 inline-block 来代替 float 吗?
举报原因:
原因补充:

(最多只允许输入30个字)