The clearfix allows a container to wrap it's floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated chldren were positioned absolutely.

clearfix.css

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

/* CSS rule for IE6 */

* html .clearfix { 
    height: 1%;
}

/* CSS rule for IE7 */

*:first-child+html .clearfix {
    min-height: 1px;
}