CSS clear Property

CSS clear property specifies the which sides of an element where another floating elements are not allowed.


The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.clear = "both"


Here is a syntax for the CSS clear property

clear: none | left | right | auto | both | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
none Default. The element does not be moved down to clear any floated elements
left The element is moved down to clear left floated elements
right The element is moved down to clear right floated elements
both The element is moved down to clear both (right and left) floated elements
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets clear property.

div.one {
  clear: left;
div.two {
  clear: right;
div.three {
  clear: both;
div.four {
  clear: none;

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 5+
  • Opera 6+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.