This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

Values have the following meanings when applied to non-floating block boxes :

left
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

right
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

both
The generated box is moved below all floating boxes of earlier elements in the source document..

none
No constraint on the box's position with respect to floats.

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added :

• The top outer edge of the float must be below the bottom outer edge of all earlier
  left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes
  (in the case of 'clear: right'), or both ('clear: both').