CSS clear Property
The clear property is directly related to floats. The clear property is used to specify whether an element should be next to floating elements or it should be below them (clear).
We can apply the clear property to both floating and non-floating elements. This property accepts values such as none, left, right, both, initial, and inherit. "None" is the default value. It allows floating elements on both sides. "Left" value does not allow any floating element on the left side. "Right" value does not allow any floating element on the right side. "Both" value does not allow any floating element on either left or right side.
Note: The clear property only affects elements in normal block flow and does not work with Flexbox or Grid layouts.
| Initial Value | none |
|---|---|
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | element.style.clear = "both"; |
Syntax
Syntax of CSS clear Property
clear: none | left | right | both | initial | inherit;Example of the clear property:
Example of CSS clear Property with left value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Result
Example of the clear property with the "right" value:
Example of CSS clear Property with right value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Example of the clear property with the "both" value:
Example of CSS clear Property with both value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Values
| Value | Description |
|---|---|
| none | Allows floating elements on both sides. It is the default value of this property. |
| left | Means that the floating elements are not allowed on the left side. |
| right | Means that the floating elements are not allowed on the right side. |
| both | Means that floating elements are not allowed on either side. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
Practice
What does the 'clear' property in CSS do?