The clear property removes the float effect.
After clearing the page flow will return back to normal.
A left floating image with un-cleared and cleared text.
<section>
<img src="/img/css/the-sower-sm.jpg"
style="float: left;
margin: 0 10px 10px 0;" />
<div>
This text is not cleared and continues to
wrap the image.
</div>
<div style="clear: both;">
This text is cleared and continues below the image.
</div>
</section>
clear: none | left | right | both |
initial | inherit;
| Value | Description |
|---|---|
| none | Default. Allows floating elements on either side. |
| left | Left side won't allow floating elements |
| right | Right side won't allow floating elements |
| both | Both left and right sides won't allow floating elements |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different clear values.
<style>
.clear-example {
clear: left;
}
</style>
<section>
<img src="/img/css/the-sower-sm.jpg"
style="float: left;
margin: 0 10px 10px 0;">
<div style="clear:none;">
This line is not cleared.
</div>
<div class="clear-example">
This line is: clear: left;
</div>
</section>
This table shows when clear support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
5.0 | Mar 1999 |
 Opera
|
6.0 | Dec 2001 |
 Safari
|
1.0 | Jun 2003 |
