A clearfix class is a way for an element to automatically clear left and right float on its child elements. This eliminates the need to add extra child element to clear float. This works by adding ::after pseudo element on container element which has floar clearing style clear:both.

Example – float left without clearing float

This example has no clear float on outer div’s child elements. This has caused some undesired effects.

Example – float left and clearing float using clearfix

This example is using clearfix hack. Here outer div has class=clearfix. Class clearfix has an ::after pseudo element which clears both left and right float. Note that if you need IE8 support, you may want to use :after instead of ::after.