{ LearnWebsiteDesign.com }
Easy to follow text and video tutorials and free website templates
Free Website Templates
Browse free website templates that organized by category.
Recommended Sponsors
CSS Clear Property Tutorials
The clear property is intrinsically tied to the float property. The clear property is used to control the content that flows around floated content. The primar purpose of the clear property is to cancel the effects of one or more floated elements.
The possible values of the clear property are listed below.
| Property | Value |
|---|---|
| clear | none, left, right, both, the initial value is none |
The example below shows you how to use the clear property with a value of both to cancel the effects of the float property.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div.box { width:100%; margin:0; padding:0; } img.image_float_left { float:left; } .clear { clear:both; } </style> </head> <body> <div class="box"> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <p class="clear>this is some text</p> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> </div> </body> </html>
The code above produces the images below.
this is some text
In the example below, the images have the the float property with a value of left applied to them. The clear property is not applied in this example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div.box { width:100%; margin:0; padding:0; } img.image_float_left { float:left; } </style> </head> <body> <div class="box"> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> </div> </body> </html>
The code above produces the images below.