“display: block; float: left” 和 “display: inline-block; float: left”的区别是什么？

Question

“display: block; float: left” 和 “display: inline-block; float: left”的区别是什么？

17

左浮动元素（例如图片）应用display: inline-block;与保留默认的display: block;规则之间是否存在实际区别？

换句话说，以下两者有何不同：

<div style="float: left; display: inline-block;">text</div>

And.

<div style="float: left; display: block;">text</div>

?

- alloy

https://developer.mozilla.org/en-US/docs/Web/CSS/float - j08691

你不知道inline-block和block的区别吗？例如... DIV是块级元素，SPAN是内联元素。这就像在问块级元素和内联元素之间有什么区别一样，这是不言自明的。 - Ross

说实话，我能想到的唯一区别就是在使用浮动元素时垂直对齐的方式不同。当你使用块级元素时，没有垂直对齐，但使用内联块级元素时则有。特别是当你将多个元素一个接一个地浮动时。 - Jacek Kowalewski

3个回答

5

你不必为同一个元素同时指定float: left和display: inline-block，你只需使用其中之一即可，不要同时使用。Float用于将文本浮动在元素周围，但不是进行布局的最佳选择。应该使用display: block和inline-block。

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

块级元素 - 根据CSS盒模型形成盒子。它们具有宽度、高度、内边距、边框和外边距，并且垂直堆叠在彼此之上。 行内元素 - 不形成盒子。它们水平排列在一起。 行内块级元素 - 在内部像块级元素一样形成盒子。在外部，它们像行内元素一样水平排列在一起，而不是堆叠在一起。

一个好的资源：http://learnlayout.com/inline-block.html 根据SitePoint的说法：

如果您是CSS布局的新手，您可能会认为以富有想象力的方式使用CSS浮动是技能的顶峰。如果您已经消耗了尽可能多的CSS布局教程，您可能会认为掌握浮动是一种仪式。您将被创意所迷惑，复杂性令人震惊，当您最终理解浮动如何工作时，您将获得成就感。

不要被愚弄。你正在被洗脑。

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

- António Regadas

2

当你使用 float: left; 时，几乎所有的元素都会表现得像一个 block 元素。因此，在这种特殊情况下没有任何区别。

输入图像描述

- Seva Arkhangelskiy

@Vishal，我说过当你使用 float: left; 或 float: right; 时，任何元素都会变成块级元素。我错了吗？ - Seva Arkhangelskiy

哦！对了 @seva.rubbo，有一个误解...抱歉 :) - Awesomestvi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Awesomestvi · Accepted Answer

@thirtydot的回答可能会对您有所帮助... 问题链接

我刚刚发现，浮动元素也会使其成为块级元素，因此指定 float 属性和 display:block 是多余的。

是的，如果您已经指定了 float: left（或 right），那么 display:block 就是多余的。

（如果您尝试指定 display:inline 和 float:left 会发生什么？）

display:inline 不会有任何影响，因为设置 float: left 强制使用 display: block，不管怎样都是块级元素：

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

否则, 如果'float'的值不是'none', 则该框被浮动并根据下表设置'display'.

总结一下这个表格:

float =  display： block .
然而， float： left;  display： inline 的特定示例在某种程度上是有用的 - 它可以修复IE6的错误。

还有其他不必要的组合的例子吗？例如块和宽度？
一些例子：
如果您设置 position： absolute ，则强制使用 float： none 。
只有在将 position 设置为除默认值 static 之外的值时， top ， right ， bottom ， left 属性才会生效。


有没有可以检查这些问题的工具？


我不认为有。这不是一个必需的东西，所以我不明白为什么会有人写这样的工具。