CSS clear


Advertisements


Description

The clear prevents an element from being displayed next to floated elements.

Possible Values

  • none − Floated elements may appear on either side of the element.

  • left − Floated elements may not appear to the left of the element.

  • right − Floated elements may not appear to the right of the element.

  • both − Floated elements may not appear on either side of the element.

Applies to

All the block-level elements.

DOM Syntax

object.style.clear = "top";

Example

Here is the example which shows effect of this property −

<html>
   <head>
   
      <style type="text/css">
         div.float {
            border:1px solid #ff9900;
            width:120px;
            float: right;
         }
         div.clear {
            border:1px solid #cccccc;
            width:120px;
            clear: right;
         }
      </style>
      
   </head>
   <body>
   
      <div class="float">
      This div has float set.
      </div>
      
      <div class="clear">
         <p>
         This div has the CSS clear property set.
         </p>
         
         <p>
         Try changing the CSS clear values to see the effect it has on the position of the div boxes.
         </p>
      </div>
      
   </body>
</html> 

This will produce following result −



Advertisements