Export (0) Print
Expand All
Expand Minimize

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

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.

For run-in boxes,this property applies to the final block box to which the run-in box belongs

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.

All Document Modes (All Versions)

Dynamic setting of the clear property on a run-in element is ignored.

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.

Show:
© 2014 Microsoft