# CSS Clearfix

## CSS Clearfix <a href="#css-clearfix" id="css-clearfix"></a>

The most common problem associated with float in our layouts is the lost height on the container element that's grouping the floated items.

![](https://3069112348-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR93ctAFfSCsQwng6wL%2F-MU7-OgR9khWyfaX0i6z%2F-MU77hcVpNZUg_UY7rzH%2Fimage.png?alt=media\&token=aa5da467-4f12-4f7b-8fff-767592889717)

{% tabs %}
{% tab title="HTML" %}
```markup
<div class="container clearfix">
  <div class="box purple"></div>
  <div class="box blue"></div>
</div>
<p>This paragraph should be below the two floated boxes</p>
```
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="CSS" %}
```css
/*
Properly calculates the height of the containing element with elements floated 
inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
```
{% endtab %}
{% endtabs %}
