CSS clear property explained

The CSS clear property is used for preventing floated elements in your HTML document from affecting the element next to it.

For example, suppose you have an image that is floated inside a paragraph as follows:

<p>
  <img src="image.jpg" style="float:left;" alt="A lion" />
  The lion (Panthera leo) is a large felid of the genus Panthera native to
  Africa and India.
</p>
<p>
  It has a muscular, deep-chested body, short, rounded head, round ears, and a
  hairy tuft at the end of its tail.
</p>

The result will be as follows:

The second paragraph will be wrapped and placed right below the first paragraph. To place the second paragraph below the image, you need to apply the clear property to it:

<p>
  <img src="image.jpg" style="float:left;" alt="A lion" />
  The lion (Panthera leo) is a large felid of the genus Panthera native to
  Africa and India.
</p>
<p style="clear:left">
  It has a muscular, deep-chested body, short, rounded head, round ears, and a
  hairy tuft at the end of its tail.
</p>

Then the result will be as follows:

The clear property itself accepts the following possible values:

• none to prevent clearing
• left to clear float:left of the previous element
• right to clear float:right of the previous element
• both to clear both left and right float of the previous elements

The clear property is commonly used where the float property is present.

One general use of the clear property is for creating a page layout together with float property as follows:

<style>
  .header {
    background-color: cornflowerblue;
  }
  .main {
    background-color: palegreen;
    width: 70%;
    float: left;
  }
  .sidebar {
    background-color: violet;
    width: 30%;
    float: right;
  }
  .footer {
    background-color: crimson;
  }
</style>
<div class="header">
  <h1>Header</h1>
</div>
<div class="main">
  <h2>Main content</h2>
</div>
<div class="sidebar">
  <h2>Sidebar</h2>
</div>
<div style="clear:both"></div>
<div class="footer">
  <h2>Footer</h2>
</div>

The above HTML document will generate a two-column layout as shown below:

The clear:both property in the example above is applied to an empty <div> tag to keep the margin from collapsing between the main and sidebar element and the footer element.

If you apply the clear:both property directly into the footer element, the top margin of the footer element will collapse as shown below:

That’s why an empty <div> tag is required to prevent the margins from collapsing.

But since an empty <div> tag is considered semantically wrong, you can wrap the floating elements in a container element that applies the clear:both property into its :after pseudo-class.

The css can be written as follows:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

The display:table property is used to make the pseudo-element a block-level element that expands to the width of the page.

The display:block property can also be used here, but the table display is used for compatibility purposes with older browsers.

Next, add the clearfix class to the container element of the floated elements:

<div class="clearfix">
  <div class="main">
    <h2>Main content</h2>
  </div>
  <div class="sidebar">
    <h2>Sidebar</h2>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>

And you’ll have the same clear effect as when you use the empty <div> tag.