How to clear floats with a clearfix

When using the old-school float property to build layouts, you may encounter issues with elements not clearing their floated children. This can lead to unexpected layout problems, such as elements overlapping or not aligning properly.

To fix this issue, the clearfix hack was developed, which allows an element to self-clear its children without the need for additional non-semantic markup.

What you need to do is to create a pseudo-element with content: '' and apply clear: both to it. This will make the element clear past both left and right floats, ensuring that the layout behaves as expected.

For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the container with the clearfix but in the same formatting context (e.g. floated columns).

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}