使用display的优点:inline-block vs float:在CSS中保留

Question

通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block

示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？

Answer 1

用3个字:inline-block更好.

内联块

到唯一的缺点display: inline-block的方法是,在IE7和元素下面只能显示inline-block,如果它已经inline默认.这意味着不必使用<div>元素而是使用<span>元素.这根本不是一个巨大的缺点,因为语义上是a <div>用于分割页面而a <span>只是用于覆盖页面的跨度,因此没有巨大的语义差异.一个巨大的好处display:inline-block是,当其他开发人员在稍后维护您的代码时, 与一个或语句相比,更加明显的是什么display:inline-block和text-align:right正在尝试完成.我最喜欢的方法是它易于使用,并以直观的方式完美地对中元素.我在Mozilla博客上发现了一篇关于如何实现跨浏览器内联块的精彩博客文章.这是浏览器兼容性.float:leftfloat:rightinline-blockvertical-align: middleline-heighttext-align: center

浮动

使用该float方法不适合页面布局的原因是因为floatCSS属性最初仅用于文本环绕图像(杂志样式),并且在设计上不是最适合一般页面布局目的.稍后更改浮动元素时,有时您会遇到定位问题,因为它们不在页面流中.另一个缺点是它通常需要一个clearfix,否则它可能会破坏页面的各个方面.所述clearfix需要添加的元素的浮动元素之后停止其塌陷父他们周围从内容分离交叉样式之间的语义线,并因此在网络开发的反模式.

上面链接中提到的任何空白问题都可以使用white-spaceCSS属性轻松修复.

编辑:

SitePoint是一个非常可靠的网页设计建议来源,他们似乎和我有同样的看法:

如果你是CSS布局的新手,你会认为以富有想象力的方式使用CSS浮动是技能的高度.如果你已经消耗了尽可能多的CSS布局教程,你可能会认为掌握浮动是一种成熟的仪式.你会被这种复杂性所震惊的聪明才智所迷惑,当你终于明白花车如何运作时,你会获得成就感.

不要被愚弄.你被洗脑了.

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

2015年更新 - Flexbox是现代浏览器的不错选择:

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

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

更多信息

2016年12月21日更新

Bootstrap 4正在删除对IE9的支持,因此正在摆脱行中的浮动并进入完整的Flexbox.

拉请求#21389

Answer 2

虽然我同意通常inline-block更好,但如果您使用百分比宽度来创建响应网格(或者如果您想要像素完美的宽度),还有一件事需要考虑:

如果您使用inline-block的是总宽度为100%或接近100%的网格,则需要确保HTML标记在列之间不包含空格.

对于浮点数,这不是您需要担心的事情 - 列浮动在列之间的任何空格或其他内容上.这个问题的答案提供了一些很好的提示,可以在不使代码变得丑陋的情况下删除HTML空格.

如果由于任何原因您无法控制HTML标记(例如限制性CMS),您可以尝试此处描述的技巧,或者您可能需要妥协并使用浮点数而不是内联块.还有一些丑陋的CSS技巧只能在极端情况下使用,比如font-size:0;在列容器上然后在每列中重新应用字体大小.

例如:

• 这是一个宽33.3%的3列网格float: left.它"只是工作"(但需要清除包装).
• 这是完全相同的网格inline-block.块之间的空白区域创建一个固定宽度的空间,将总宽度推到100%以上,打破布局并使最后一列下拉一条线.
• 这是相同的网格,inline-blockHTML中的列之间没有空格.它"再次正常工作" - 但HTML更加丑陋,你的CMS可能会强制某种美化或缩进其HTML输出,这使得实际上难以实现.

Answer 3

您可以在这里找到深入的答案。

但总的来说，float您需要注意并照顾周围的元素以及inline-block排列元素的简单方法。

谢谢