Author
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.
Syntax of Clear
.element {
clear: left | right | both | none | inherit;
}
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>
a) Text Wrapping with Clear
clear: both.clear ensures 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
.footer {
clear: left;
background: #3498db;
color: white;
padding: 10px;
}
c) Clearing Right Float
.footer {
clear: right;
background: #e67e22;
color: white;
padding: 10px;
}
d) Clearing Both Sides
.footer {
clear: both;
background: #2ecc71;
color: white;
padding: 10px;
}
<!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>