clear

< css‎ | properties
Jump to: navigation, search

clear

This article is Almost Ready.


W3C Recommendation

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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
4.0
Yes
3.5
Yes
1.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
6.0
Yes
6.0
Yes
1.0
Yes


Examples

View live exampleExample of clear:none; in use.

CSS

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

View live exampleExample of clear: left; in use.

CSS

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

View live exampleExample of clear: right; in use.

CSS

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

View live exampleExample of clear: both; in use.

CSS

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

View live exampleMoving a footer below all floated content above.

HTML

Clearing Floats

float:left

Paragraphs are typically clear: none; by default, and are frequently used in conjuction with a floated image. In this example, pretend the black box labeled float:left; is an image floated left.

<a href="javascript:void()" id="toggleClear">Toggle the clear settings on the footer</a>

<footer id="footer">This is a footer.</footer>

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

Specification Status Related Changes
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Recomendation
Cascading Style Sheets Level 3 Working Draft 9 (CSS3) Specification Working Draft

See also

Related articles

Box Model








  • clear















Other articles

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article