什么是更好的方法，浮动或显示内联？ [复制]答案

【问题标题】：What is a better method, float or display-inline? [duplicate]什么是更好的方法，浮动或显示内联？ [复制]
【发布时间】：2014-12-27 07:43:15
【问题描述】：

在本例中，我将使用 2 个 DIV

<div>
    <div class="element"></div>
    <div class="element"></div>
</div>

使用 CSS

.element { float: left; }

好的，以上是将块显示为内联的一种方法。我最近遇到了另一种方法：

<div>
    <div class="element"></div>
    <div class="element"></div>
</div>

.element { display: inline-block; }

现在上面也将块显示为内联。

虽然，第一种方法还有一点需要担心，即当你使用浮动时，它会扰乱内容的正常流动。

所以我想知道，上述哪种方法是实现内联显示的最佳方法？如果是第二种方法，那是否意味着我不应该使用第一种方法？

【问题讨论】：

float:left; vs display:inline; vs display:inline-block; vs display:table-cell; 和 Drawback of CSS: display:inline-block vs float:left 的可能重复项
感谢您的链接:)
display:flex 是最好的。 :)

标签： html css

【解决方案1】：

display:inline-block 是最好的方法，但请记住，当您使用 display:inline-block 时，会出现一些跨浏览器问题，div 在各种浏览器中的显示可能会略有不同，例如一些可能顶部对齐，而在其他浏览器中它可能是底部对齐。解决此问题的一种简单方法是设置垂直对齐

使用 display:inline-block 的好处是您可以将 div 放在中间。如果你想让你的 div 也显示在页面的中心，那么这可以通过使用 display:inline-block 来实现，并且在父 div 中你必须添加 text-align:centre。这无法通过浮动来实现，您可以从要添加的一侧保存那些额外的填充以使它们显示在中心。

Float:left 也有它的好处，应该比内联块更多地使用，无论何时何地需要

【讨论】：

【解决方案2】：

"显示：内联块；"是接受内联显示的最佳方法。

这是涵盖此主题的好资源：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本上 IE 有一个称为“hasLayout”的触发器。触发此操作将允许您在块级元素上使用 display:inline-block（默认情况下，IE 仅允许在本机内联元素上使用 inline-block）。

另外，旧版本的 Firefox 也不支持 inline-block，但有一个“inline-stack”值 (moz-inline-stack)。

据我所知，获得跨浏览器“display:inline-block”的最佳方式

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

但当您不想要块并且希望它左对齐时，“float:left”也很有用

【讨论】：

【解决方案3】：

如果你提供 display: inline-block, 你可以同时使用两者 div 将彼此相邻放置，
如果我们使用float:left，对于块元素反之亦然，在我们指定宽度之前，它不会彼此相邻。

【讨论】：