What is clearfix (clear floats)?

Elements after a floating element will flow around it. Use the "clearfix" hack to fix the problem:

Without Clearfix:

With Clearfix:

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

.clearfix {
  overflow: auto;
}

The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:

.clearfix::after {
  content: ""; /* or content: " "; */
  clear: both;
  display: table; /* or display: block */
}

Source: https://www.w3schools.com/howto/howto_css_clearfix.asp