Copyright © tutorialspoint.com

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

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

Copyright © tutorialspoint.com