一起使用 display: inline 和 float: left 是否多余？答案

【问题标题】：Is it redundant to use display: inline and float: left together?一起使用 display: inline 和 float: left 是否多余？
【发布时间】：2013-09-09 00:46:27
【问题描述】：

我有一个这样定义的类：

<div class="float-left inline">

地点：

.inline {
   display: inline;
}
.float-left {
   float: left;
}

谁能告诉我是否需要同时使用float: left; 和display: inline;。我有点困惑，因为他们似乎都在做同样的事情。

【问题讨论】：

没有浮动意味着您正在强制 DOM 与浮动位置对齐....
float 有清除问题，你需要一个 clearfix 或使用 overflow 通常会导致问题的技巧（例如阴影）。你应该使用 inline-block 这通常是最好的解决方案

标签： css css-float

【解决方案1】：

不是多余的。实际上，我在设置浮点数时遇到了一个问题：正确的元素，它适用于 chrome，不适用于 IE。具体来说，在 IE 上，元素的内容溢出了容器的边界。因此，我将 display: inline 和 float:right 一起使用，它在 chrome 和 IE 11 上运行良好。

【讨论】：

【解决方案2】：

实际上没有必要同时使用两个属性，但是由于您使用具有各自属性的两个类就可以了，让我在这里解释一下，如果您只使用display: inline;，那么首先您需要看看@ 987654326@和float有区别吗

Inline Elements

Floated Elements

现在，是的，我知道span 已经是inline 元素，但是如果您看到，当我使用float 时，它会使inline 元素的行为类似于inline-block，它会在以下位置应用边距top 和 bottom 也是如此，而 display: inline; 不会。

另一个区别是float通常是不同的定位，当你将一个元素向左或向右浮动时，它会创建一个空白空间，这使得它下面的元素会移动。

Floated Example

虽然display: inline; 不会

Inline Example

看到区别了吗？所以这取决于你什么最适合你的需求，只需使用overflow: hidden; 或任何可用的clearfix 确保你的浮动元素clear 或任何可用的clearfix，否则你会看到布局的一些意外行为。

结论：即使你使用display: inline;，你的元素也是block级别元素和inline，所以没有必要使用display: inline;

【讨论】：

@mr-alien - 对不起。你能检查一下结论中的措辞吗？你的意思是说“即使你不使用”？

【解决方案3】：

display:inline 表示一个元素可以放在其他项目旁边。

这与 block 级别元素 (display:block) 不同，后者占用水平空间，暗示换行，并且不会像 div、段落或表格那样彼此相邻。

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

【讨论】：

那么你的意思是在这种情况下我可以只使用 "display: inline" 吗？
是的，我想让它显示在左侧。我只是想知道我是否只能使用一种而不能使用另一种。

【解决方案4】：

虽然这两者在元素的不同方面起作用，但它们可以结合使用。例如，将 Anchor 更改为 display:block 和 float:left 将起作用，并允许您在其上设置高度和宽度。

获取一个 div 并应用 display:inline 并浮动它没有多大意义。

【讨论】：

您好，您说“没有多大意义”，所以您的意思是我只使用“display: inline”会更好吗？
不，不完全是。如果您有一个元素通常应该是块元素，但您希望它像内联元素一样显示，请使用内联。另一方面，浮动将元素“排除”在正常流程之外，即您可以在一段文本的中间放置一个图像，但将其“向右”浮动会将其推到容器的右侧，从而允许文本在其周围流动离开。

【解决方案5】：

使用display，您正在更改元素的显示类型。

使用float，您正在为该元素设置位置。

Here 是一个带有实用解释的答案，为什么您更喜欢 float 进行定位。

【讨论】：