a shot of dev knowledge

RELATED TAGS

What is a clearfix in CSS?

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.

svg viewer

Syntax

.clearfix {
  properties
}

Code

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.

RELATED TAGS

RELATED COURSES

View all Courses

Keep Exploring