A clearfix is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally.
The CSS float property states how an element should float; i.e., it specifies the position where an element should be placed.
The clearfix property allows a container to wrap its floated children. Without a clearfix, a container will not wrap around its floated children and will collapse, just as if its floated children had been positioned absolutely.
.clearfix {
properties
}
In the following example, the image is taller than the div element containing it, so it overflows outside the container.
To fix this overflow we add the clearfix property to our div; this makes the div completely contain our image.