Floated block elements are not inline elements

When block elements are floated, they will remain block.

Many of us have made false assumptions, based on how elements behave in the browser, often overlooking specific details – this is the case with CSS floats and floated elements. Since they will line up next to each other in the browser, it is easy to make the mistake to think they have become "inline" elements.

But that would kinda make the CSS display:inline; property pointless to use, had this been the case. No. Floated elements are just that, floated. But there is a change in display taking place for inline elements – this can easily be verified by reading the w3c float reference, and by trying to apply a height to an inline element.

Floating an inline element will turn it into a block, as also stated in the reference:

With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).

Why is this important to know?

It may seem like a completely useless detail, whether a element is block or inline – but knowing that setting a width or height for inline elements wont work, it should be easy to see how you could get confused. A CSS beginner could easily get confused, and think: Why doesn't it work to set a height for inline elements? It works for floated elements after all, and floated elements are inline.

Don't make these quick conclusions, take the time to know the standards – floated elements are not inline elements, they are blocks that are floated, and they often need to be cleared to avoid that their parent container collapses.

To Set a height or width on inline elements, you need to use the display property to first shift their display to either block or inline-block. You do not need to do this with floated element, regardless if they where originally inline – floated elements automatically become block elements, and will ignore the display declaration entirely.

Sources

  1. Cascading Style Sheets, level 1