A floated child does not contribute to its parent’s height, so the parent collapses and the next block slides up underneath it. The usual fix is an empty div with clear: both at the end of the container — presentation in the markup, and one that gets lost the first time the template is refactored.
<!-- the old fix, in the markup -->
<div class="clear"></div>
/* the clearfix, in the stylesheet */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; } /* IE 6/7 only */The :after rule alone is enough to clear the floats. :before is there for a second reason: display: table on both generates anonymous table cells that stop the container’s margins collapsing with its first and last child’s, which is a different bug people usually fix separately with padding. overflow: hidden on the parent also contains floats and is one line, but it works by establishing a block formatting context, so it clips anything meant to escape the box — a dropdown, a tooltip, a focus outline. Use it where nothing overflows and the clearfix everywhere else. The *zoom hack is IE6/7 only; IE8 supports generated content.