问题描述
通常，当我们想在一行中有多个 DIVs 时，我们使用 float：left 我发现了 display：inline-block
示例链接。
在我看来， display：inline-block 是更好的方法 align DIVs ，但是有什么缺点吗？为什么这种方法比 float 更不受欢迎？
3个字： inline-block 更好。
Float 使用 上面链接中提到的任何空白问题都很容易用 是一个非常可信的网站设计建议来源，他们似乎有相同的意见我做的： 2015年更新 - Flexbox是 Bootstrap 4正在移除对IE9的支持，因此会从行中移除浮动并移动完整的Flexbox。 Normally, when we want to have multiple Example link here.It seems to me that In 3 words: Inline Block The only drawback to the Float The reason that using the Any white space problems mentioned in the link above could easily be fixed with the SitePoint is a very credible source for web design advice and they seem to have the same opinion that I do: http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/ 2015 Update - Flexbox is a good alternative for modern browsers: Dec 21, 2016 Update Bootstrap 4 is removing support for IE9, and thus is getting rid of floats from rows and going full Flexbox. 这篇关于使用display的优点：inline-block vs float：left in CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
显示：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 以完美的中心元素，以一种直观的方式。我在。以下是。
float 方法的原因不适用于布局的页面是因为 float CSS属性，并且通过设计并不最适合于一般的页面布局目的。稍后更改浮动元素时，有时您会遇到定位问题，因为它们。另一个缺点是它通常需要清除，否则可能会破坏页面的某些方面。 clearfix需要在浮动元素后面添加一个元素来停止 around which that crosses the semantic line between separation style from content and is the a 。
白色空格 CSS属性固定。
编辑：
DIVs in a row we would use float: left, but now I discovered the trick of display:inline-blockdisplay: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?inline-block is better.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 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.white-space CSS property.Edit:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}