The most common problem associated with float in our layouts is the lost height on the container element that's grouping the floated items.
<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>
/*
Properly calculates the height of the containing element with elements floated
inside.
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
