How to Clear Floats

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:

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

Clearfix: A Lesson in Web Development Evolution

The Clearfix is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.

All you might be trying to do is position a sidebar to the left of your main content block, but the result would be two elements that overlap and collapse on each other. To complicate things further, the bug is inconsistent across browsers. The clearfix was invented to solve all that.

In January of 2017, Rachel Andrew wrote an article for her blog titled "The end of the clearfix hack?" In it, she describes a way to replace the clearfix hack with a single line of code using a new display mode rule known as flow-root.

.container {
  display: flow-root;
}

What's happening when we float something with CSS, and how clears work with floats.

clear options : both, left, right