Copyright © tutorialspoint.com

CSS - clear

previous next


Description:

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

Possible Values:

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

Copyright © tutorialspoint.com