css display property when a float is applied

Question

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

div.foo {
            


        

Answer 1

If I read the spec correctly, and practice confirms this, setting float: left or right overrides the display property anyway and forces display: block on the element (although with peculiarities, see below), so there will no difference between your three examples:

left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

right Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.

none The box is not floated.

Differently from normal display: block though, setting float dictates its own behaviour in regards to width that override the display property: if no width was explicitly specified, the floated element will take up as much width as it needs, as opposed to standard block element behaviour of taking up 100% width automatically.