html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS clear property

Definition

The CSS clear property allows us to position an element under floated elements.

Applies To

All block-level elements.

Property Values

both - The elements top border edge is positioned below any left and right floated elements.

left - The elements top border edge is positioned below any left floated elements.

inherit - The element will inherit the float property of its parent element.

none - No clearing occurs in respect to other floated elements.

right - The elements top border edge is positioned below any right floated elements.

Default Value

Default value is set to none so no clearing occurs in respect to other floated elements

Inheritance

The clear property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS clear property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS clear Property</title>

<!-- Valid values for CSS clear Property are:
	
	both, left, inherit, none and right.
	
--> 

<style type="text/css">

.div1 {
  border: 1px solid black;
}

/* Float left */
.img1 {
  float: left;
  border: 2px solid green;
}

/* Float right */
#img2 {
  float: right;
  border: 2px solid blue;
}

/* Clear images */
#para1 {
  clear: both;
}

</style>

</head>
<body>
<h1>CSS clear Property</h1>
<h2>Float an image left with no clearance</h2>
<div class="div1">
<p>
<img class="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
Floating an image to the left within a div. Notice how the text wraps 
to the right of the image. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
</p>
</div>
<h2>Float left and Right with clearance on both</h2>
<div class="div1">
<img class="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
<img id="img2" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
<p id="para1">
Floating 2 images to left and right within a div. Notice how the text clears
the images. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
</p>
</div>
</body>
</html>

How It Looks

The results of using the clear property with the values above will look something like the following:

When you cut and paste the code, adjust screen size to see the effects on clear elements.

notepad
CSS caption-side    << Prev          Next >>   CSS clip

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.