2

我有一个这样定义的类：

<div class="float-left inline">

在哪里：

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

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

4

5 回答 5

2

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

这与占用水平空间的block层级元素 ( display:block) 不同，它意味着换行，并且不会彼此相邻，如 div、段落或表格。

向左飘浮; 与显示：内联；与显示：内联块；与显示：表格单元格；

于 2013-09-05T09:03:02.653 回答
1

随着display您更改元素的显示类型。

与float您一起为该元素设置位置。

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

于 2013-09-05T09:03:46.343 回答
1

实际上没有必要同时使用这两个属性，但是由于您使用具有各自属性的两个类很好，让我在这里解释一下，如果您display: inline;只使用，那么首先您需要看看inline它与float

内联元素

浮动元素

现在，是的，我知道这span已经是inline元素，但是如果您看到，当我使用 时float，它会使inline元素表现得像 an ，它也会在和inline-block处应用边距，而不会。topbottomdisplay: inline;

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

浮动示例

虽然display: inline;不会

内联示例

看到不同？因此，这取决于您什么最适合您的需求，只需clear通过使用overflow: hidden;或任何可用的 clearfix 确保您的浮动元素，否则您会看到布局的一些意外行为。

结论：即使你使用display: inline;，你的元素也是一个block关卡元素 and inline，所以没有必要使用display: inline;

于 2013-09-05T09:22:33.617 回答
1

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

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

于 2013-09-05T09:07:52.170 回答
0

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

于 2019-10-22T18:39:15.800 回答