Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - clear


previous next AddThis Social Bookmark Button


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:

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

This div has float set.

This div has the CSS clear property set.

Try changing the CSS clear values to see the effect it has on the position of the div boxes.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements