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 {
    display: block;
    float: left;
}

div.foo2 {
    display: inline;
    float: left;
}

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

EDIT:

If there are no differences according to the spec, then do certain antiquated versions of browsers (ahem, IE) render them differently?

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.