The problem happens when a floated element is within a container box, that 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. You can use 2 methods to fix it:

  • {clear: both}
  • clearfix

Here is the css code:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

How does it work

Well you just add that to your CSS file and then you can use it as you would with normal class attribute like

<div class="clearfix">Content</div>

You can test the result using the below code snippet

<div class="clearfix" >
  <div style="float: left;">left</div>
  <div style="float: right;">right</div>
</div>