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
What does the CSS rule “clear: both” do?
The CSS clear: both property is used to prevent elements from floating alongside other floated elements. When applied to an element, it forces that element to move below any preceding floated elements (both left and right floated), ensuring proper layout flow.
Syntax
selector {
clear: both;
}
Possible Values
| Value | Description |
|---|---|
left |
Clears left floated elements only |
right |
Clears right floated elements only |
both |
Clears both left and right floated elements |
none |
Default value; allows floating on both sides |
Example 1: Basic Clear Both Usage
The following example shows how clear: both pushes an element below a leftfloated div
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 500px;
height: 300px;
background-color: lightgreen;
border: 3px solid orange;
padding: 10px;
}
.child {
width: 200px;
height: 100px;
background-color: red;
border: 2px solid pink;
float: left;
margin: 10px;
}
.text {
font-size: 1.2rem;
clear: both;
color: blue;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<p class="text">This text appears below the floated element due to clear: both</p>
</div>
</body>
</html>
A green container with a red floated box on the left and yellow text below it, demonstrating how clear: both prevents the text from wrapping around the floated element.
Example 2: Clearing Multiple Floated Elements
This example demonstrates clear: both with both left and right floated elements
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
background-color: lightblue;
border: 3px solid navy;
padding: 10px;
}
.left {
width: 150px;
height: 80px;
background-color: orange;
float: left;
margin: 5px;
}
.right {
width: 150px;
height: 80px;
background-color: pink;
float: right;
margin: 5px;
}
.cleared {
clear: both;
background-color: yellow;
padding: 10px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left Float</div>
<div class="right">Right Float</div>
<div class="cleared">This div appears below both floated elements</div>
</div>
</body>
</html>
A blue container with an orange box floated left, a pink box floated right, and a yellow section below both floated elements demonstrating the clear: both effect.
Key Points
- clear: both prevents elements from appearing alongside any floated elements
- It forces the cleared element to start below all preceding floated content
- Commonly used to prevent layout issues when working with floated layouts
- Modern CSS prefers flexbox or grid over float/clear combinations
Conclusion
The clear: both property is essential for controlling layout flow when working with floated elements. It ensures proper element positioning by preventing unwanted wrapping around floated content, maintaining clean and predictable layouts.
Updated on: 2026-03-15T16:59:59+05:30
602 Views
Advertisements