logo标签列表

使用CSS中的display:inline-block和float:left的优势对比

csscss-floathtml
132
通常，当我们想要在一行中有多个
时，我们会使用float:left，但现在我发现了display:inline-block的技巧。
示例链接here。 在我看来，display:inline-block是将
对齐在一行的更好方法，但它是否存在任何缺点？为什么这种方法比float技巧不太流行？
@Moak，那个问题是关于inline而不是inline-block的。但是相关问题中的第一个答案很好：https://dev59.com/qWgt5IYBdhLWcg3wywhJ#11823622 - ThinkingStiff
2
可能是重复的问题：float:left; vs display:inline; vs display:inline-block; vs display:table-cell; - ThinkingStiff
3
例子链接已失效。 - information_interchange
5个回答
161
用三个单词概括：inline-block 更好。
内联块。 display: inline-block方法唯一的缺点是在IE7及以下版本中，元素只能以inline的方式显示为inline-block。这意味着你必须使用<span>元素而不是<div>元素。但实际上这并不是一个很大的缺点，因为从语义上讲，<div>用于分割页面，而<span>仅用于覆盖页面的一部分，所以两者之间的语义差异并不大。使用display:inline-block的一个重要优势是，当其他开发人员在以后维护你的代码时，他们更容易理解display:inline-block和text-align:right的目的，而不像float:left或float:right语句那样难以理解。我最喜欢inline-block方法的一个好处是，可以轻松使用vertical-align:middle、line-height和text-align:center来完美地居中元素，这种方法非常直观。我在Mozilla博客上找到了一篇关于如何实现跨浏览器的inline-block的优秀博客文章。这里是浏览器兼容性信息。

浮动

使用float方法布局页面不太合适的原因是，float CSS属性最初只用于文字环绕图片（杂志风格），因此在一般的页面布局中并不是最佳选择。当稍后更改浮动元素时，有时会出现定位问题，因为它们不在页面流中。另一个缺点是它通常需要清除浮动，否则可能会破坏页面的某些方面。清除浮动需要在浮动元素后添加一个元素，以防止它们导致其父元素折叠，这跨越了将样式与内容分离的语义线，因此是Web开发中的反模式。

任何在上面链接中提到的空格问题都可以通过使用white-space CSS属性轻松解决。
编辑： SitePoint是一个非常可靠的网页设计建议来源，他们似乎和我有相同的看法：
如果你刚接触CSS布局，你可能会认为用CSS浮动方式进行创意布局是技术高超的体现。如果你已经阅读了多篇CSS布局教程，你可能会认为掌握浮动是一种成长的过程。你将被其独创性所吸引，惊叹于其复杂性，并且当你最终理解浮动如何工作时，你会获得一种成就感。
不要被愚弄了。你正在被洗脑。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015年更新 - 弹性盒子布局是现代浏览器的良好替代方案:

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

更多信息

2016年12月21日更新

Bootstrap 4将不再支持IE9，因此从行中去除浮动并完全采用Flexbox。

拉取请求＃21389

4
"clearfix"只是一个名称；"fix"表示修正了不正确的期望和/或不正确的浏览器实现。我（高兴地）同意有替代浮动/清除的方法，但并没有任何固有的问题或解决方案与此相关。 - Tim M.
10
@Alex - 有没有不用hack方法且兼容跨浏览器的方式，可以消除位于不同行的inline-block元素之间的空格？我想停止使用float，但是我找到的关于这个问题的最佳链接（这里和这里）都不尽如人意。你提到了white-space属性--你能解释一下吗？ - antinome
3
@Alex - 谢谢，这很酷，但我仍然认为使用现代clearfix实现浮动更易于维护，因为如果将来在我的CSS中的其他地方自定义了 letter-spacing ，它不会被破坏。 - antinome
1
@AzDesign 我的猜测是，因为新手 Bootstrap 用户如果不能在 <div> 元素上使用网格系统，会感到不满意，因为如果使用 inline-block 而不是 float，会在旧版本的 IE 中引起问题。所以，基本上是为了兼容旧版浏览器。 - Alex W
2
请注意，inline-block会在元素周围添加空白。如果您将其用于网格或不想要这些空白，则必须添加额外的样式/HTML技巧来解决此问题。参见：http://css-tricks.com/fighting-the-space-between-inline-block-elements/#comment-166444 - kretzm
显示剩余14条评论
25

虽然我同意一般情况下使用inline-block更好，但如果您使用百分比宽度创建响应式网格（或者您想要像素完美的宽度），则需要考虑到以下问题：

如果您正在使用总宽度为100％或接近100％的网格来使用inline-block，则需要确保您的HTML标记之间没有空格。

对于浮动，这不是您需要担心的事情-列会漂浮在列之间的任何空格或其他内容上。此问题的答案提供了一些好的提示，可以删除HTML中的空格而不会使代码难看。

如果由于任何原因您无法控制HTML标记（例如，受限制的CMS），则可以尝试此处描述的技巧，或者您可能需要妥协并使用浮动而不是inline-block。 还有一些丑陋的CSS技巧仅在极端情况下使用，例如在列容器上使用font-size:0;，然后重新应用每个列的字体大小。

例如：

  • 这里是具有inline-block属性并且HTML中列之间没有空格的相同网格。它再次“正常工作”，但是HTML更加难看，您的CMS可能会强制进行某种美化或缩进以使其HTML输出更难实现。
    • 有没有可能的解决方法来解决无法加入空格的问题，比如 div+(whitespace) {display:none} 或其他什么方法？ - NoBugs
    1
    请看第三段的第一句话之后的内容... 特别是查看链接的问题。 - user56reinstatemonica8
    @NoBugs 只需将 font-size: 0; 应用到包含元素即可，但要注意内联块中是否设置了特定的字体大小！！ - Jai
    @Jai 没错，由于样式/视图应该与创建html/模型的过程分离，所以这是一种不好的做法。（如果您使用了一个服务，它给您提供了<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...，那怎么办？） - NoBugs
    4
    如果您想要以像素精确的方式对齐
    ，则请使用float。 在IE中，似乎始终需要您削减一些像素才能使用inline-block。
    6
    是的，那是因为你必须避免在元素之间使用空格，因为内联块会像内联元素一样考虑空格。将内联块标签紧密放在一起，就不会出现像素方面的问题。 - pronebird
    这也可能是浏览器默认填充/间距在元素上的差异。至少过去我总是使用 * {padding:0px; margin:0px; }，因为这有助于平衡我的编码。 - Angry 84
    我想知道这是否是Bootstrap（或其他一些框架）使用它而不是inline-block的原因？ - NoBugs
    2

    您可以在这里深入了解相关答案。

    但是一般来说，使用float时需要注意周围元素的影响，而inline-block则是将元素排列成一行的简单方法。

    谢谢

    1

    有一个关于inline-block的特性可能不是很直观。CSS中vertical-align的默认值是baseline，这可能会导致一些意外的对齐行为。看看这篇文章。

    http://www.brunildo.org/test/inline-block.html

    相反，当您使用float:left时，这些div是彼此独立的，您可以轻松使用margin对其进行对齐。
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接