Web4College

CSS clear property

src

Description

CSS clear property decides whether the elements should be floated on either side of the floated element or not.


We'll take an example of three boxes. We will apply float property to all of the three boxes. And then we will check the behavior of clear property for the green box only.

Syntax

clear : none | left | right

Property values

noneDefault

If the elements are floating on either right or left side then none value allows the flow of other boxes on both sides of the current (green) box.

clear: none;
Try it

left

If the boxes are floating on the left side then this value does not allow the flow of boxes on the left side of the current (green) box.

There is no box on the left side of the green box.

clear: left;
Try it

right

If the boxes are floating on the left side then this value does not allow the flow of boxes on the right side of the current box.

There is no box on the right side of the green box.

clear: right;
Try it

Applicable to

It applies to all elements