How to Clear Float (Clearfix)

Learn how to use the clearfix technique to clear floats.

clearfix technique

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

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

Example

.clearfix {
  overflow: auto;
}

Try It Yourself

As long as you can control the margin and padding outside,overflow: auto; The effect of clearing the float is very good (otherwise, you might see a scrollbar).

However, the new and modern clearfix technique is safer to use, and most web pages use the following code:

Example

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

Try It Yourself

Related Pages

Tutorial:CSS Floating