CSS: clear on inline elements

Question

Check this JSFiddle:

<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats">
<span>The contents of floats are </span>

The image is floated, and the span has clear:both. However, if the span has display value inline or inline-block, the clearance is not created. Only if it is block, the clearance is created.

I checked the Spec, it says:

both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

It doesn't mention how the display affects the creation of the clearance. Could anybody help to explain?

Answer 1

It's simple: clear only applies to block-level elements.

'clear'

Applies to: block-level elements

Block-level elements are defined as

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the display property make an element block-level: block, list-item, and table.