Dank des Clearfixes umfassen Container floatende Kindelemente. Alternative ist overflow: hidden, die aber nicht immer gut funktioniert.

clearfix.css

/**
  * @section Clearing Methoden
  * @see     http://www.yaml.de/de/dokumentation/grundlagen/allgemeines.html
  */

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

  /* benötigt Safari zwingend */
  .clearfix { display:block; }

  /* IE6 + 7: hasLayout aktivieren */
  .clearfix { *height:1%; }  

  /* Wenn ich doch mal traditionell clearen will */
  .clearing { clear: both; line-height: 0px; font-size: 1px; height: 0px; }

/**

• http://nicolasgallagher.com/micro-clearfix-hack/
• For modern browsers
• The use of table rather than block is only necessary if using
• :before to contain the top-margins of child elements.
• Is implemented in Bootstrap as @mixin clearfix.
  */

.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}