2.1.48 [CSS-Level2-2009] Section 9.5.2, Controlling flow next to floats: the 'clear' property

  • Article

V0075:

The specification states:

 'clear'
  
 Value:                 none | left | right | both | inherit 
 Initial:               none 
 Applies to:            block-level elements 
 Inherited:             no 
 Percentages:           N/A 
 Media:                 visual 
 Computed value:        as specified
  
 This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear'property does not consider floats inside the element itself or in other block formatting contexts.

Quirks Mode and IE7 Mode (All Versions)

The following variations apply:

  • The clear property also applies to inline elements such as <span> and <a>.

  • The inherit value of the clear property is not supported.

Note The [CSS-Level1-2008] specification, section 5.5.26 'clear,' states that clear may apply to all elements.

V0076:

The specification states:

 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).

Quirks Mode and IE7 Mode (All Versions)

When the width of an element is set to auto and has the clear property applied, a blank line box is displayed after the floated element.

V0077:

The specification states:

 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.

Quirks Mode and IE7 Mode (All Versions)

When the width of an element is set to auto and has the clear property applied, a blank line box is displayed after the floated element.

V0078:

The specification states:

 If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.
 Then the amount of clearance is set to the greater of: 
 1.The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared. 
 2.The amount necessary to place the top border edge of the block at its hypothetical position.
 Note: The clearance can be negative or zero.

Quirks Mode and IE7 Mode (All Versions)

Regardless of the clearance, the top margin of the cleared element pushes the cleared element down.