CSS Clear
In simple words, clear tells the browser “do not allow this element to sit next to floated elements”. It’s a way to reset the layout flow after using floats.
Floats are often used to align images, boxes, or columns to the left or right. Without clear, elements like footers or paragraphs may overlap floated content, breaking the layout.
Why is it used with floats?
- Floats remove elements from the normal flow.
- Elements following floats may wrap around them unexpectedly.
- Using clear ensures that elements start below the floated items, preventing overlap or messy layouts.
Syntax of Clear
.element {
clear: left | right | both | none | inherit;
}
Clear Property Values
clear: none;
Default value. The element does not clear any floats and can sit beside floated elements.
Example:
<div style="float: left; width: 100px; height: 50px; background: #3498db; margin: 5px;">Floated</div>
<p style="clear: none; background: #2ecc71;">This paragraph does not clear the float and may wrap beside it.</p>
clear: left;
Prevents the element from being next to any left-floated elements. Moves it below all left floats.
Example:
<div style="float: left; width: 100px; height: 50px; background: #3498db; margin: 5px;">Left Float</div>
<p style="clear: left; background: #e67e22;">This paragraph clears the left float and starts below it.</p>
clear: right;
Prevents the element from being next to right-floated elements. Moves it below all right floats.
Example:
<div style="float: right; width: 100px; height: 50px; background: #e67e22; margin: 5px;">Right Float</div>
<p style="clear: right; background: #2ecc71;">This paragraph clears the right float and starts below it.</p>
clear: both;
Prevents the element from being next to any floated elements (left or right). Commonly used to clear all floats and maintain proper layout.
Example:
<div style="float: left; width: 100px; height: 50px; background: #3498db; margin: 5px;">Left Float</div>
<div style="float: right; width: 100px; height: 50px; background: #e67e22; margin: 5px;">Right Float</div>
<p style="clear: both; background: #f39c12;">This paragraph clears both left and right floats and appears below all floated elements.</p>
clear: inherit;
The element inherits the clear value from its parent. Useful for maintaining consistent layout in nested elements.
Example:
<div style="float: left; width: 150px; background: #9b59b6; padding: 5px; clear: both;">
Parent (clears both)
<p style="float: none; clear: inherit; background: #f39c12;">Child inherits clear from parent (both).</p>
</div>
CSS Clear Property Exampless (none, left, right, both, inherit) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Clear Property Examples</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 50px;
}
.float-left { float: left; background: #3498db; }
.float-right { float: right; background: #e67e22; }
/* Clear examples */
.clear-none { clear: none; background: #2ecc71; padding: 5px; }
.clear-left { clear: left; background: #3498db; padding: 5px; color: #fff; }
.clear-right { clear: right; background: #e67e22; padding: 5px; color: #fff; }
.clear-both { clear: both; background: #f39c12; padding: 5px; color: #fff; }
.parent { float: left; background: #9b59b6; padding: 5px; margin-bottom: 5px; }
.child { float: none; clear: inherit; background: #f1c40f; padding: 5px; }
.container { border: 2px solid #333; padding: 10px; margin-bottom: 20px; overflow: auto; }
</style>
</head>
<body>
<h2>1. clear: none;</h2>
<div class="container">
<div class="box float-left">Left Float</div>
<p class="clear-none">This paragraph uses <code>clear: none;</code> and may wrap beside the floated box.</p>
</div>
<h2>2. clear: left;</h2>
<div class="container">
<div class="box float-left">Left Float</div>
<div class="clear-left">Clears Left Float</div>
</div>
<h2>3. clear: right;</h2>
<div class="container">
<div class="box float-right">Right Float</div>
<div class="clear-right">Clears Right Float</div>
</div>
<h2>4. clear: both;</h2>
<div class="container">
<div class="box float-left">Left Float</div>
<div class="box float-right">Right Float</div>
<div class="clear-both">Clears Both Sides</div>
</div>
<h2>5. clear: inherit;</h2>
<div class="container parent">
Parent (floated left)
<div class="child">Child inherits clear from parent</div>
</div>
</body>
</html>
Examples of Clear in CSS
a) Text Wrapping with Clear
- The first paragraph flows around the floated image.
- The second paragraph moves below all floated elements due to
clear: both. - Using
clearensures content doesn’t overlap floated elements.
<img src="image.jpg" style="float: left; width: 150px; margin: 10px;" alt="Sample Image">
<p>This paragraph wraps around the floated image because the image is floated left.</p>
<p style="clear: both; background: #f3f3f3; padding: 5px;">This paragraph starts below the floated image because we applied <code>clear: both;</code>.</p>
b) Clearing Left Float
- The footer will move below all left-floated elements, but it can still sit beside right-floated elements.
- Useful when only left floats need to be cleared.
.footer {
clear: left;
background: #3498db;
color: white;
padding: 10px;
}
c) Clearing Right Float
- The footer will move below all right-floated elements, ignoring left floats.
- Ideal for layouts where right floats are common (like sidebars or ads).
.footer {
clear: right;
background: #e67e22;
color: white;
padding: 10px;
}
d) Clearing Both Sides
- The footer moves below all floated elements, both left and right.
- This is the most common method to ensure that floated content doesn’t overlap following elements.
- Provides a clean and predictable layout in float-based designs.
.footer {
clear: both;
background: #2ecc71;
color: white;
padding: 10px;
}
CSS Clear Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Clear Examples</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
.container {
border: 2px solid #333;
padding: 10px;
margin-bottom: 30px;
overflow: auto; /* contain floated elements */
}
.box {
width: 100px;
height: 50px;
margin: 5px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 50px;
}
/* Float Examples */
.float-left { background: #3498db; float: left; }
.float-right { background: #e67e22; float: right; }
/* Clear Examples */
.clear-both { clear: both; background: #2ecc71; padding: 10px; }
.clear-left { clear: left; background: #3498db; padding: 10px; color: #fff; }
.clear-right { clear: right; background: #e67e22; padding: 10px; color: #fff; }
</style>
</head>
<body>
<h2>Text Wrapping with Clear</h2>
<div class="container">
<div class="box float-left">Float Left</div>
<p>This paragraph wraps around the blue box because it is floated left.</p>
<p class="clear-both">This paragraph starts below the floated box because <code>clear: both;</code> is applied.</p>
</div>
<h2>Clearing Left Float</h2>
<div class="container">
<div class="box float-left">Left Float</div>
<div class="clear-left">Clears Left Float</div>
<p>Notice how this div moves below the left-floated box but can still sit beside right floats.</p>
</div>
<h2>Clearing Right Float</h2>
<div class="container">
<div class="box float-right">Right Float</div>
<div class="clear-right">Clears Right Float</div>
<p>This div moves below the right-floated box, ignoring left floats.</p>
</div>
<h2>Clearing Both Sides</h2>
<div class="container">
<div class="box float-left">Left Float</div>
<div class="box float-right">Right Float</div>
<div class="clear-both">Clears Both Sides</div>
<p>The green div moves below all floated elements, ensuring a clean layout.</p>
</div>
</body>
</html>