How to Clear Floats? What is Clearfix?

A clearfix is a way for the parent element to clear or fix its elements automatically, so no additional markup is needed. In a float layout, it is generally used where elements are floated to stack horizontally.

It is a CSS hack that solves a bug that occurs when two floated elements are stacked next to each other. All you may be trying to do is to position a sidebar to the left of your main content block, but as a result, there will be two elements that overlap and collapse on each other. The bug is inconsistent across browsers. So, the clearfix was invented to solve such problems.

Here, we will discuss 3 clearfix hacks.

1. Use the CSS overflow property

When an element is bigger than its containing element, and it is floated, it will overflow its container.

We can add the overflow property with the "auto" value to the containing element to fix this issue.

Example of clearing floats with the overflow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        padding: 8px;
      }
      .noclearfix {
        float: right;
      }
      .clearfix {
        overflow: auto;
      }
      p {
        clear: right;
      }
      .img {
        float: right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
    <p>Add overflow: auto;</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
  </body>
</html>

2. Use the CSS clear, content, and display properties with ::after

The overflow:auto clearfix works well as long as you can control your margins and paddings (else scrollbars may be seen). However, a newer clearfix hack is safer to use, and most web pages use the following code:

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

Here, we use the ::after pseudo-element. The clear property is set to "both", which means that the floating elements are not allowed on both right and left sides. The display property is set to "table" to make the element behave like an HTML <table> element. And the content is left empty.

Example of clearing floats with the clear, display, and content properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        padding: 8px;
      }
      .noclearfix {
        float: right;
      }
      .clearfix::after {
        content: "";
        clear: both;
        display: table;
      }
      .img {
        float: right;
      }
      p {
        clear: right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
    <p>Add the new clearfix hack.</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
  </body>
</html>

3. Use the CSS display property with "flow-root"

Actually, we are reaching a time when the clearfix is no longer needed. The clearfix is losing a bit of relevance. Grid and Flexbox are filling in the gaps for an advanced layout on the web. There is a new way of replacing the clearfix hack with a single line of code using a new display mode rule, which is known as flow-root.

Use the flow-root in this way:

.clearfix {
  display: flow-root;
}

Example of clearing floats with the "flow-root" value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #8ebf42;
        padding: 8px;
      }
      .noclearfix {
        float: right;
      }
      .clearfix {
        display: flow-root;
      }
      .img {
        float: right;
      }
      p {
        clear: right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
    <p>Add display: flow-root.</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
  </body>
</html>

Example of using the clearfix hack and "flow-root" value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        border: 1px solid #3bc9db;
        border-radius: 5px;
        background-color: #e3fafc;
        width: 400px;
        padding: 5px;
      }
      .container2::after {
        content: "";
        display: block;
        clear: both;
      }
      .container3 {
        display: flow-root;
      }
      .item {
        height: 100px;
        width: 100px;
        background-color: #1c87c9;
        border: 1px solid #eee;
        border-radius: 5px;
        float: left;
      }
      .clear {
        clear: both;
      }
      .wrapper {
        max-width: 600px;
        margin: 40px auto;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="wrapper">
        <h2>Default behavior</h2>
        <p>This item is a wrapper, which contains a left-floating block.</p>
        <div class="container container1">
          <div class="item"></div>
          Example one
        </div>
        <p>
          The border on the containing block wraps only the text as the floated element is taken out of flow.
        </p>
        <p>
          The content following the box will rise up and wrap around the float unless we set it to clear.
        </p>
        <h2 class="clear">The clearfix hack</h2>
        <p>
          In this item, we use the clearfix hack to cause the wrapper to clear the floated item.
        </p>
        <div class="container container2">
          <div class="item"></div>
          Example two
        </div>
        <h2>Using display: flow-root</h2>
        <p>
          CSS now has a way to make elements clear floats. The value of the display is set to flow-root, and our floated box is cleared.
        </p>
        <div class="container container3">
          <div class="item"></div>
          Example three
        </div>
      </div>
    </div>
  </body>
</html>