CSS clear Property

February 10, 2021 12:37 pm IST

You are Here:

CSS clear Property

CSS clear property sets whether an element must be cleared floating elements that precede it.

Note: The clear property applies to floating and non-floating elements.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; float: left; } #point{ clear: left; } </style> </head> <body> <h1>CSS clear Property</h1> <img src="car-left.png"> <p> This is first paragraph.</p> <p id="point"> This is second paragraph.</p> </body> </html>

Run

Syntax

Using CSS

element{ clear: both; }

Using Javascript

object.style.clear="both";

Animatable

No, clear property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS clear property is none.

Property Value

The following table provides a list of values for CSS clear property.

Value	Explanation
none	Specifies that the element is not moved down to clear past floating elements.
left	Specifies that the element is moved down to clear past left floats.
right	Specifies that the element is moved down to clear past right floats.
both	Specifies that the element is moved down to clear past both left and right floats.

Using JavaScript

In the following example, we will demonstrate how to change the CSS clear property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; float: right; } </style> </head> <body> <h1>CSS clear Property</h1> <img src="car-left.png"> <p> This is a paragraph.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.clear = "right"; } </script> </body> </html>

Run