In this section, we will learn what the clear property is and how to use it in CSS.

Click here to run the example of clear property.

CSS clear Property Definition and Usage

When we turn an element into a float element, browsers will relay the page in order to fill the gap created because of that floated element, by using those elements below the floated one (if there’s any element, of course).

But for any particular reason, we might not want an element to be positioned under a floated element.

For this reason, CSS provided a property named `clear` by which we can clear any floated element on top of a non-floated element.

If we apply this property to an element, it will be pushed down below any floated element that is currently on top of the target element in order to become clear of any floated one.

Note: the `clear` property is used in those elements that we want to remove any floated element on top of it.

CSS clear Property Syntax

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

CSS clear Property Value

• none: This is the default value and when used, the element that has a floated element over itself won’t do anything about it.
• left: using this value, the target element will be placed below those elements that are floated to the left side of their parent and also was placed over the target element.
• right: using this value, the target element will be placed below those elements that are floated to the right side of their parent and also was placed over the target element.
• both: using this value, the target element will be placed below those elements that are floated to the left or right side of their parent and also placed over the target element.

Example: clear property in CSS

See the Pen clear property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS clear Property Work?

In the example above, the green box has the property `clear: left` which makes the element to be placed below the element that is floated to the left side of its parent. But the green element is still under the element that is floated to the right side of its parent.

In order to place the green element below both floated elements, we should apply the keyword “both” as the value of `clear` property on the green element. This way, we’re telling browser that there shouldn’t be any floated element on top of this green box.

Example: clear both in CSS

See the Pen clear both in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

As you can see, the green box is no longer under any floated element.