clear Property in CSS

CSS | clear Property: In this tutorial, we are going to learn about the clear property of CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on December 10, 2019

CSS | clear Property

We know so much about float property and how it is used for styling our web pages. If you do not remember the float property, let's help jog your memory. The float property is used to set the elements in a particular section of the web page. For e.g, if you set the property for an element as float:right; then that particular element will float to the right side of the page. But what about the time when we do not want that element to float in that part of the page?

That is where clear property comes in.

The clear property is a very basic and easy property to apply. It is used to specify on which side of the page the floating elements should not float basically to clear that section of the page of the floating elements.

By using clear property it will be ensured that the element on which clear property is applied will not float to the specified area of the page. This property comes in handy very often when we do not want our elements to float either side of the web page.

Implication

To use the clear property not many lines of code are required all you gotta do is specify the side or section of the page where you do not want your floating elements to float.

This could be understood clearly with the help of the following example:

For e.g: if you do not want your elements to float on either side of the page(left or right), you must use this property as:

Syntax:

Element {
    clear: both;
}

Note that to not allow floating elements to float on either side of the page, only both attribute was enough we did not use "right and wrong", which makes it quite shorthand too.

However, if you wish to restrict your floating elements from floating on a particular side of the page, for example, right then you will have to specify right as an attribute.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            float: left;
        }
        
        p.clear {
            clear: both;
        }
    </style>
</head>

<body>
    <h1>clear property in CSS</h1>
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" width="140" height="142">
    <p>this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
    <p class="clear">this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
</body>

</html>

Output

In the above example, remove the clear class to see the effect.

Key points:

Let us understand clear property more,

The default value of the clear property is none. This means if you write none immediately after clear then no changes will be done to the floating elements.

To use this property in JavaScript, the syntax is different and it goes like this,

object.style.clear="both"

Below is a table that would explain the values of clear property in a much better way,

Property values:

Value	Description
none	A default value. It allows floating elements on either sides
left	This does not allow floating elements on the left side.
right	This does not allow floating elements on the right side.
both	This does not allow floating elements on either side.
initial	This would set the property to its default value.
inherit	This helps in inheriting property from its parent element.

CSS Tutorial & Examples »

The border-radius Property in CSS

Border Images in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples