CSS clear Property
CSS clear property is used to clear any element, preceding it. This property applies to floating as well as non-floating elements. When it is applied to the non-floating blocks, it gets moved to the border edge of the element down unless it is below the margin edge of all the relevant floats. The top margin of the non-floated block gets collapsed. On the other hand, vertical margins between the two floated elements will not collapse.
Syntax for clear property in CSS
Following is the syntax for the clear property.
clear: none|left|right|both|initial|inherit;
Example: CSS clear Property
Here in the example below, we are using the clear property with different border colors, and their different values. In this case, we have given the clear value as left. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The clear property in CSS</title>
<style type="text/css">
.wrapper{
border:1px solid black;
padding:10px;
}
.left {
border: 1px solid black;
clear: left;
}
.black {
float: left;
margin: 0;
background-color: yellow;
color: black;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div>
</body>
</html>
Output:
Example 2: CSS clear Property
Here in the example below, we are using the clear property with different border colours, and their different values. In this case, we have given the clear value as right. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The clear property in CSS</title>
<style type="text/css">
.wrapper{
border:1px solid black;
padding:10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div>
</body>
</html>
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the clear property in CSS is none. This property is applicable to the block-level elements. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
