clear

Summary

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Note: If you want an element to contain all floating elements inside it, you can either float the container as well, or use clear on a replaced ::after pseudo-element on it.

#container:after { 
   content: "";
   display: block; 
   clear: both;
}

Syntax

Formal syntax: none | left | right | both
clear: none
clear: left
clear: right
clear: both

clear: inherit

Values

none
The element is not moved down to clear past floating elements.
left
The element is moved down to clear past left floats.
right
The element is moved down to clear past right floats.
both
The element is moved down to clear past both left and right floats.

Examples

View Live Examples

h1 { clear: none }
h2 { clear: right }

Specifications

Specification Status Comment
CSS Level 2 (Revision 1) Recommendation No significant changes, though details are clarified.
CSS Level 1 Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

See also

Document Tags and Contributors

Last updated by: teoli,
Hide Sidebar