This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

clear

Summary

The clear CSS property specifies if an element can be positioned next to or must be positioned below the floating elements that precede it in the markup.

Overview table

Initial value
none
Applies to
Block-level elements
Inherited
No
Media
visual
Computed value
as specified
Animatable
No
CSS Object Model Property
clear
Percentages
N/A

Syntax

  • clear: both
  • clear: inherit
  • clear: left
  • clear: none
  • clear: right

Values

none
May have adjacent floats on both the left and right sides.
left
Floated elements that precede the cleared element are not allowed to the left of the cleared element. The cleared element must move below the floated element.
right
Floated elements that precede the cleared element are not allowed to the right of the cleared element. The cleared element must move below the floated element.
both
Floated elements that precede the cleared element are not allowed to be adjacent to the cleared element. The cleared element must move below the floated elements.
inherit
Takes the same specified value as the property for the element’s parent.

Examples

Example of clear:none; in use.

p{
   /* clear: value; */
   clear: none;
}

View live example

Example of clear: left; in use.

p{
   /* clear: value; */
   clear: left;
}

View live example

Example of clear: right; in use.

p{
   /* clear: value; */
   clear: right;
}

View live example

Example of clear: both; in use.

p{
   /* clear: value; */
   clear: both;
}

View live example

Moving a footer below all floated content above.

<h1>Clearing Floats</h1>
<!-- Note that it is a good practice to have your floated items precede the elements they are floated around. -->
<div id="box"><code>float:left</code></div>
<p>Paragraphs are typically <code>clear: none;</code> by default, and are frequently used in conjuction with a floated image. In this example,
pretend the black box labeled <code>float:left;</code> is an image floated left. </p>
<p><a href="javascript:void()" id="toggleClear">Toggle the clear settings on the footer</a></p>
<footer id="footer">This is a footer.</footer>

View live example

Notes

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.

Related specifications

CSS Level 2 (Revision 1)
Recommendation
CSS - Basic Box Model
Working Draft

See also

Related articles

Box Model

Other articles

Related pages

Attributions