When to use clearfix

Clearfix is an option when a floated element is within a container, that floated element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.