Html 'display: block; 之间的区别 浮动：左'与'显示：内联块；向左飘浮'？

Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

提问by alloy

Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?

左浮动元素（例如，图像）是否具有 display: inline-block; 是否有实际区别？应用于它，而不是保留默认显示：块；适用规则？

In other words, what's the difference between:

换句话说，有什么区别：

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

and

和

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

?

?

回答by Vishal Chauhan

An answer by @thirtydot might help you... Question's link

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

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

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

Yes, display: blockis redundant if you've specified float: left(or right).

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

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

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

display: inlinewill not make any difference, because setting float: leftforces display: block"no matter what":

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

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

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' 的值不是 'none'，则框会浮动，并根据下表设置 'display'。

To summarize said table: float= display: block.

总结所述表：float= display: block。

However, your specific example of float: left; display: inlineis usefulin one way - it fixes an IE6 bug.

但是，您的特定示例在一种方式中float: left; display: inline很有用-它修复了 IE6 错误。

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

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

Some examples:

一些例子：

• If you set position: absolute, then float: noneis forced.
• The top, right, bottom, leftproperties will not have any effect unless positionhas been set to a value other than the default of static.

• 如果设置position: absolute，则float: none是强制的。
• 的top，right，bottom，left性能不会有任何影响，除非position已经被设置为默认以外的值static。

Is there a tool that can check for such things?

有没有可以检查这些事情的工具？

I don't thinkso. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

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

回答by António Regadas

You don't have to specify a float: leftand a display: inline-blockfor the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.

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

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

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

Block elements— form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.

块元素— 根据 css 盒子模型形成盒子。它们具有宽度、高度、填充、边框和边距，并且它们垂直堆叠在一起。

Inline elements— don't form boxes. They sit horizontally next to each other.

内联元素——不要形成盒子。他们水平地并排坐着。

Inline-block elements— act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.

内联块元素——就像在内部形成盒子的块元素一样。在外面，它们就像内联元素一样水平地并排放置，而不是堆叠在一起。

A good resource: http://learnlayout.com/inline-block.html

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

According to SitePoint:

根据 SitePoint 的说法：

If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity, and you'll gain a sense of achievement when you finally understand how floats work.

Don't be fooled. You're being brainwashed.

如果您不熟悉 CSS 布局，您会认为以富有想象力的方式使用 CSS 浮动是技能的高度。如果您已经阅读了尽可能多的 CSS 布局教程，您可能会认为掌握浮动是一种通过仪式。你会为它的独创性所折服，为它的复杂性而惊叹，当你最终了解花车的工作原理时，你会获得一种成就感。

不要被愚弄。你被洗脑了

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

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

回答by Seva Arkhangelskiy

When you use float: left;almost any elements behave as a blockelement. So there is no any difference in this particular case.

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