使用display的优点：inline-block vs float：left in CSS [英] Advantages of using display:inline-block vs float:left in CSS

问题描述

通常，当我们想在一行中有多个 DIVs 时，我们使用 float：left 我发现了 display：inline-block

示例链接此处。
在我看来， display：inline-block 是更好的方法 align DIVs ，但是有什么缺点吗？为什么这种方法比 float 更不受欢迎？

解决方案

3个字： inline-block 更好。

显示：inline-block 方法的唯一缺点是在IE7和下面的元素只能显示<$ c默认情况下，$ c> inline-block ，如果它已经 inline 。这意味着，不是使用< div> 元素，你必须使用< span> 元素。这根本不是一个巨大的缺点，因为语义上< div> 用于分割页面，而< span> 只是为了覆盖一个页面的跨度，所以没有巨大的语义差异。 display：inline-block 的一个巨大好处是，当其他开发人员在稍后维护您的代码时，显而易见的是： inline-block 和 text-align：right 试图完成 float：left 或 float：right 语句。我最喜欢的 inline-block 方法的好处是很容易使用 vertical-align：middle ， line-height 和 text-align：center 以完美的中心元素，以一种直观的方式。我在 Mozilla博客。以下是浏览器兼容性。

Float

使用 float 方法的原因不适用于布局的页面是因为 float CSS属性原来仅旨在使文本环绕图像（杂志风格），并且通过设计并不最适合于一般的页面布局目的。稍后更改浮动元素时，有时您会遇到定位问题，因为它们不在页面流。另一个缺点是它通常需要清除，否则可能会破坏页面的某些方面。 clearfix需要在浮动元素后面添加一个元素来停止 parent from collapsing around which that crosses the semantic line between separation style from content and is the a 在网络开发中的反模式。

上面链接中提到的任何空白问题都很容易用白色空格 CSS属性固定。

编辑：

SitePoint 是一个非常可信的网站设计建议来源，他们似乎有相同的意见我做的：

如果你刚刚接触CSS布局，你会原谅认为
使用CSS浮点在想象的方式是技能的高度。如果你
已经消耗了尽可能多的CSS布局教程，你可以找到，你可能
假设掌握浮动是一种仪式。你会惊讶的
的聪明才智，惊讶的复杂性，你会得到一个意义
的成就，当你终于明白float如何工作。

不要被愚弄。

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

2015年更新 - Flexbox是现代浏览器 a> ：：

  .container {
 display：flex; / *或inline-flex * / 
} 
 
 .item {
 flex：none | [<'flex-grow'> <'flex-shrink'>？ || <'flex-basis'> ] 
} 
  

更多信息

Bootstrap 4正在移除对IE9的支持，因此会从行中移除浮动并移动完整的Flexbox。

提取请求＃21389

Normally, when we want to have multiple DIVs in a row we would use float: left, but now I discovered the trick of display:inline-block

Example link here. It seems to me that display:inline-block is a better way to align DIVs in a row, but are there any drawbacks? Why is this approach less popular then the float trick?

解决方案

In 3 words: inline-block is better.

Inline Block

The only drawback to the display: inline-block approach is that in IE7 and below an element can only be displayed inline-block if it was already inline by default. What this means is that instead of using a <div> element you have to use a <span> element. It's not really a huge drawback at all because semantically a <div> is for dividing the page while a <span> is just for covering a span of a page, so there's not a huge semantic difference. A huge benefit of display:inline-block is that when other developers are maintaining your code at a later point, it is much more obvious what display:inline-block and text-align:right is trying to accomplish than a float:left or float:right statement. My favorite benefit of the inline-block approach is that it's easy to use vertical-align: middle, line-height and text-align: center to perfectly center the elements, in a way that is intuitive. I found a great blog post on how to implement cross-browser inline-block, on the Mozilla blog. Here is the browser compatibility.

Float

The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image (magazine style) and is, by design, not best suited for general page layout purposes. When changing floated elements later, sometimes you will have positioning issues because they are not in the page flow. Another disadvantage is that it generally requires a clearfix otherwise it may break aspects of the page. The clearfix requires adding an element after the floated elements to stop their parent from collapsing around them which crosses the semantic line between separating style from content and is thus an anti-pattern in web development.

Any white space problems mentioned in the link above could easily be fixed with the white-space CSS property.

Edit:

SitePoint is a very credible source for web design advice and they seem to have the same opinion that I do:

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Don’t be fooled. You’re being brainwashed.

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

2015 Update - Flexbox is a good alternative for modern browsers:

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

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

More info

Dec 21, 2016 Update

Bootstrap 4 is removing support for IE9, and thus is getting rid of floats from rows and going full Flexbox.

Pull request #21389

这篇关于使用display的优点：inline-block vs float：left in CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！