a concise shot of dev knowledge
Become a Contributor
Concise shots of dev knowledge

RELATED TAGS

clearfix
float
css
cssfloat

What is a clearfix in CSS?

Edpresso Team

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

clearfix
float
css
cssfloat
RELATED COURSES

View all Courses

Keep Exploring

Learn in-demand tech skills in half the time

Copyright ©2022 Educative, Inc. All rights reserved.

soc2