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?
It's simple:
clear
only applies to block-level elements.Block-level elements are defined as