The difference between 'display: block; float: left' vs. ' display: inline-block; swim left '?

Question

Is there a practical difference between displaying an element on the left (for example, an image): inline-block; Applies to it, and not to the default display: block; does the rule apply?

In other words, what is the difference between:

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

and

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

?

Answer 1

@Thirtydot answer can help you ... Link to question

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

Yes, display: block is redundant if you specified float: left (or right ).

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

display: inline will not make any difference because setting float: left forces display: block "no matter what":

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

Otherwise, if the 'float' has a value other than "no", the field pops up and the "display" is set in accordance with the table below.

To summarize the table below: float = display: block .

However, your specific example is float: left; display: inline float: left; display: inline is useful on the one hand - it fixes an IE6 error.

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

Some examples:

• If you set position: absolute , then float: none will be forced.
• The top , right , bottom , left properties will have no effect unless position is set to a value other than the default value of static .

Is there a tool that can test such things?

I do not think so. This is not what is ever needed, so I do not understand why someone would write such a tool.

Answer 2

You do not need to specify float: left and display: inline-block for the same element, you use one or the other, not both. Float is used to place text around elements; it is not the best weapon to choose when creating a layout. Go with display: block and inline-block.

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

Block elements - form blocks in accordance with the css block model. They have a width, height, padding, borders and margins and are located vertically one above the other.

Built-in elements - do not form boxes. They sit horizontally next to each other.

Inline block elements - act as block elements inside where they form blocks. Outside, they act as built-in elements that sit horizontally next to each other, and do not stack on top of each other.

Good resource: http://learnlayout.com/inline-block.html

According to SitePoint:

If you're new to CSS layouts, you'll be forgiven for making creative use of floating-point CSS the top of the skill. if you have used as many CSS layout tutorials as you can. Suppose mastering floats is a rite. You will be blinded by ingenuity, struck by complexity, and you will get a sense of achievement when you finally understand how the floats work.

Do not be fooled. You are brainwashed.

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

Answer 3

When using float: left; almost any element behaves like a block element. So in this particular case there is no difference.

Answer 4

From the two previous comments, it should be clear that the floating element gives it a block (when moving left or right) and at the same time an inline element (since other elements flow around it). Therefore, it may look like an inline block. Therefore, adding a display property may not be necessary. The float property has higher specificity than display in the context of the question.