＆＃39; display：block; float：left＆＃39; vs.＆＃39; display：inline-block;漂浮：离开＆＃39;？

Question

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

换句话说，有什么区别：

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

和

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

Answer 1

@thirtydot的回答可能会帮助你...... Question's link

  

我刚发现漂浮了   元素也会成为一个块，   因此指定float属性   display:block是多余的。

是的，如果您指定display: block（或float: left），则right是多余的。

  

（如果你试过会发生什么   指定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 的具体示例在某种程度上非常有用 - it fixes an IE6 bug.

  

还有其他任何例子吗？   要注意多余的组合   对于？块＆amp;宽度？等

一些例子：

• 如果设置position: absolute，则强制float: none。
• 除非top设置为默认值以外的值，否则right，bottom，left，position属性不会产生任何影响static。

  

是否有可以检查的工具   这样的事情？

我不想。这不是任何需要的东西，所以我不明白为什么有人会写这样的工具。

Answer 2

您不必为同一元素指定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 box-model形成框。它们具有宽度，高度，填充，边框和边距，并且它们垂直堆叠在一起。

内联元素 - 不要形成框。它们水平地坐在一起。

内联块元素 - 就像它们形成框的内部的块元素一样。在外面，它们的作用就像内嵌元素水平地彼此相邻，而不是彼此堆叠。

一个很好的资源：http://learnlayout.com/inline-block.html

根据SitePoint：

  

如果您是CSS布局的新手，那么您可以原谅这一点   以富有想象力的方式使用CSS浮动技能是技能的高度。如果你   你可能已经消耗了尽可能多的CSS布局教程   假设掌握花车是一种通过仪式。你会感到眼花缭乱   通过聪明才智，对复杂性感到惊讶，你将获得一种感觉   当你终于明白花车是如何工作时的成就。

     

不要被愚弄。你被洗脑了。

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

Answer 3

当您使用float: left;时，几乎所有元素都表现为block元素。所以在这种特殊情况下没有任何区别。