What is clearfix & how to use clearfix?

Problem:

Sometimes div class named clearfix. What is this clearfix and how to use this?

Solution:

The clearfix is a way for an element to automatically clear its floated children.

Suppose your child element is an image. If its height is longer than its parent height, it seems awkward. To solve this problem “clearfix” is used so that parent element wraps around the child element.

HTML:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

CSS:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

Explanation:

Dot is used in the content because empty element doesn’t support older version of IE. Here “clear:both” clears its floated children.