CSS clear property

Definition and Usage

The clear property specifies which side of an element does not allow other floating elements.

Description

The clear property defines which side of an element does not allow floating elements. In CSS1 and CSS2, this is achieved by automatically adding an upper margin to the clearing element (i.e., the element that has the clear property set). In CSS2.1, a clearing space is added above the upper margin of the element, while the margin itself does not change. Regardless of which change is made, the final result is the same. If declared as left or right clear, the top border edge of the element will be just below the bottom margin edge of the floating element on that side.

See Also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:clear property

Example

Floating elements are not allowed on both sides of the image's left and right sides:

img
  {
  float:left;
  clear:both;
  }

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
left Floating elements are not allowed on the left side.
right Floating elements are not allowed on the right side.
both Floating elements are not allowed on both sides.
none Default Value. Allows floating elements to appear on both sides.
inherit Specifies that the value of the clear property should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.clear="left"

TIY Example

Clear element sides
This example demonstrates how to use the clear element to remove floating elements from the sides.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0