CSS Clearfix

The most common problems associated with float in our layouts is the lost height on the container element that's grouping the floated items.

Automatic Height

In this example we've given the container div a red border. This container has grown to accommodate the size of all the elements with the class box inside.

Lost Height

When we float the elements with the class box inside the red border collapses and the height no longer calculates the height of the elements inside. The red border no longer surrounds the boxes and if we were ask it it's height it would be 0.

Clearfix

CSS clearfix has a long history in web development. The important thing to remember is when you want to have elements aligned beside eachother with float. Apply a clearfix class on the containing element to properly format the height.

Without Clearfix

We can encounter some unexpected layout issues.

With Clearfix

The height of the container is properly calculated and the paragraph stays below the container as we would expect.

Additional Resource

This YouTube video was created by Steve Griffith.