html - 'display: block; float: left' 与 'display: inline-block; float: left' 之间的区别？

Question

左浮动元素(比如图像)是否有显示:内联 block ；应用于它，而不是保留默认显示: block ；应用规则？

换句话说，它们之间有什么区别:

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

和

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

?

Answer 1

@thirtydot 的回答可能对您有所帮助... Question's link

I just found out that floating an element will also make it a block, therefore specifying a float property and display:block is redundant.

是的，如果您指定了 float: left(或 right)，display: block 是多余的。

(What would happen if you tried to specify display:inline and float:left? )

display: inline 不会有任何区别，因为设置 float: left 会强制 display: block “无论如何”:

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

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

总结一下这个表:float = display: block。

但是，您的 float: left; 的具体示例display: inline 在某种程度上很有用 - it fixes an IE6 bug.

Are there any other examples of redundant combinations to watch out for? block & width ? etc,

一些例子:

• 如果您设置了position: absolute，则强制使用float: none。
• top、right、bottom、left 属性不会有任何影响，除非 position 已设置为默认值 static 以外的值。

Is there a tool that can check for such things?

我不这么认为。它不是任何时候都需要的东西，所以我不明白为什么有人会编写这样的工具。