CSS Property clear








clear defines the sides of an element on which no floating elements may appear.

Summary

ItemValue
Initial value none
Inherited No.
Version CSS1
JavaScript syntax object.style.clear="left"
Applies to Block-level elements.




CSS Syntax

clear: both | left | none | right | inherit

Property Values

The property values are listed in the following table.

Value Description
left No floating elements on the left side
right No floating elements on the right side
both No floating elements on the left or the right side
none Default. Allows floating elements on both sides
inherit Inherit the clear property from the parent element




Browser compatibility

clear Yes Yes Yes Yes Yes

Example

An example showing how to use clear CSS property 

<!DOCTYPE HTML>
<html>
     <head>
         <title></title>
         <style type='text/css'>
             p {<!--   ww w.j av a 2 s.co  m-->
                 border: 1px solid black;
                 background: rgb(218, 218, 218);
                 line-height: 1em;
                 padding: 10px;
             }
             p#floated {
                 float: left;
                 margin: 10px;
             }
             p#cleared {
                 clear: left;
             }
         </style>
     </head>
     <body>
         <p id='floated'>
             This is the text of the first paragraph.
         </p>
         <p id='cleared'>
             This is the text of the second paragraph.
         </p>
     </body>
</html>

Click to view the demo

Example: clear both

The clear property specifies which sides of an element have to be clear from other floating elements. 

<!DOCTYPE html>
<html>
<head>
<style>
.myImage{<!--from  www  . ja  va 2  s.  c  om-->
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.text_line{
    clear:both;
    margin-bottom:2px;
}
</style>
</head>

<body>
    <img class="myImage" src="http://java2s.com/style/download.png">
    <img class="myImage" src="http://java2s.com/style/download.png">
    <img class="text_line" src="http://java2s.com/style/download.png">
    <img class="myImage" src="http://java2s.com/style/download.png">
</body>
</html>

Click to view the demo