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.

# Syntax
```css
.clearfix {
  properties
}
```

# Code
In the following example, the image is taller than the div element containing it, so it overflows outside the container.

<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}
</style>
</head>
<body>

<div>
  <img class="img1" src="/api/edpresso/shot/5768154204602368/image/5887038630920192" alt="Puppy" width="250" height="180">
Some sample text.
 </div>

</body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

To fix this overflow we add the clearfix property to our div; this makes the div completely contain our image.

<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<div class="clearfix">
  <img class="img2" src="/api/edpresso/shot/5768154204602368/image/5887038630920192" alt="Puppy" width="250" height="180">
  Some sample text.
</div>

</body>
</html>



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

What is a clearfix in CSS?

A clearfix allows a container to wrap floated children in CSS, preventing layout collapse without extra markup.