Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Turning off Float using Clear Property of CSS
The CSS clear property is used to control how elements behave next to floated elements. It specifies which sides of an element should not be adjacent to floating elements, effectively forcing the element to move below any floated content.
Syntax
clear: value;
Possible Values
| Value | Description |
|---|---|
none |
The element is not moved below left or right floated elements. Default value. |
left |
The element is moved below left floated elements |
right |
The element is moved below right floated elements |
both |
The element is moved below both left and right floated elements |
Example 1: Clearing Left Floated Elements
This example demonstrates how the clear: left property moves an element below left-floated content −
<!DOCTYPE html>
<html>
<head>
<style>
.clear {
clear: left;
}
.red {
background-color: #F44336;
}
.yellow {
background-color: #FF8A00;
}
.green {
background-color: #4CAF50;
}
p {
float: left;
margin: 10px;
padding: 10px;
color: white;
width: 150px;
}
</style>
</head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Cleared Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>
Four colored boxes appear. The first red box floats left, the second red box with clear:left moves below it on a new line, and the yellow and green boxes continue floating to the right of the cleared element.
Example 2: Using Clear Both with Float None
This example shows how clear: both combined with float: none creates a full-width element that clears all floating content −
<!DOCTYPE html>
<html>
<head>
<style>
p {
float: left;
margin: 10px;
padding: 10px;
color: white;
background-color: #48C9B0;
border: 4px solid #145A32;
width: 200px;
}
p.noneFloat {
float: none;
clear: both;
color: #34495E;
background-color: #ECF0F1;
width: auto;
}
</style>
</head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>
The first green box floats left. The second box (gray) appears on its own line spanning the full width due to clear:both and float:none. The remaining green boxes float left below the cleared element.
Conclusion
The clear property is essential for controlling layout flow around floated elements. Use clear: both to ensure an element starts on a new line, clearing all floated content above it.
Updated on: 2026-03-15T14:06:58+05:30
3K+ Views
Advertisements