'display:block;之间的区别 float:left'const'display:inline-block; 向左飘浮'？

Question

左浮动元素(例如和图像)是否显示之间是否存在实际差异:内联块; 适用于它,而不是保留默认显示:block; 适用规则？

换句话说,有什么区别:

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

和

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

？

Answer 1

@thirtydot的答案可能会帮助你... 问题的链接

我刚刚发现浮动一个元素也会使它成为一个块,因此指定一个float属性并且display:block是多余的.

是的,display: block如果您指定float: left(或right),则是多余的.

(如果你试图指定display会发生什么:inline和float:left？)

display: inline不会有任何区别,因为设置float: left力量display: block"无论如何":

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

总结一下表:float= display: block.

但是,您的具体示例在某种程度上float: left; display: inline 是有用的 - 它修复了IE6错误.

是否还有其他需要注意的冗余组合示例？块和宽度？等等,

一些例子:

有没有可以检查这些东西的工具？

我不这么认为.这不是需要的东西,所以我不明白为什么有人会写这样的工具.

Answer 2

您不必为同一元素指定a float: left和a display: inline-block，您可以使用一个或另一个，而不是同时使用两者。Float用于在元素周围浮动文本，这并不是进行布局时选择的最佳武器。与display一起：block和inline-block。

块元素 -根据css框模型形成框。它们具有宽度，高度，填充，边框和边距，并且彼此垂直堆叠。

内联元素 -不要形成框。他们水平地彼此相邻坐着。

内联块元素 —就像内部形成框的块元素一样。在外部，它们的行为就像是内联元素，彼此水平放置，而不是堆叠在一起。

根据SitePoint：

如果您不熟悉CSS布局，那么您会以为以想象力的方式使用CSS浮点数是技巧的高度，这是可以原谅的。如果您已经阅读了许多CSS布局教程，那么您可能会认为掌握浮动知识是一种习惯。当您最终了解浮动机制的工作原理时，您会被其独创性，复杂性所震惊，并会获得成就感。

不要上当。你被洗脑了。