Css display property when applying float

Question

When an element moves, how do different display properties affect the layout? Or, what are the differences, if any, between these classes:

div.foo { display: block; float: left; } div.foo2 { display: inline; float: left; } div.foo3 { display: inline-block; float: left; } 

EDIT:

If according to the specification there are no differences, then do some outdated versions of browsers (ah, IE) make them different?

Answer 1

If I read the spec correctly, and practice confirms this, setting float: left or right in any case overrides the display property and the display: block strengths on the element (although with features, see below), so there are no differences between the three examples:

left The element generates a block block that moves to the left. The content moves to the right of the window, starting from the top (taking into account the "clear" property).

right Similar to "left", except that the field moves to the right and the content moves to the left of the window, starting at the top.

no Box floats.

Unlike regular display: block , however, setting the float determines its width behavior, which overrides the display property: if the width was not explicitly specified, the floating-point element will occupy as much width as required, unlike the standard behavior of the block element which automatically takes up 100% of the width.