CSS - clear

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:

Example:

Here is the example which shows effect of this property:

<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>
<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>
     

This will produce following result: