The Mystery Of the CSS Float Property - CSS Essentials - page 33

You could also do this by means of a <br /> tag with an inline style. In any
case, you will have the desired result: the parent container will expand to
enclose all of its children. But this method is not recommended since it adds
nonsemantic code to your markup.
SOLUTION 3: THE :AFTER PSEUDO-ELEMENT
The :after pseudo-element adds an element to the rendered HTML page.
This method has been used quite extensively to resolve float-clearing
issues. Here is how the CSS looks:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
The CSS class “clearfix” is applied to any container that has floating children
and does not expand to enclose them.
But this method does not work in Internet Explorer up to version 7, so an IE-
only style needs to be set with one of the following rules:
.clearfix {
display: inline-block;
}
.clearfix {
zoom: 1;
}