CSS clear Property

The clear property removes the float effect.

After clearing the page flow will return back to normal.

Example

#

A left floating image with un-cleared and cleared text.

This text is not cleared and continues to wrap the image.
This text is cleared and continues below the image.
<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>

Syntax

clear: none | left | right | both | 
       initial | inherit;

Values

#

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.

More Examples

Click the buttons to see different clear values.

This line is not cleared.
This line is: clear: left;
<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>

Browser support

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

You may also like

Guides