Clearfix with :after, and the float it stops collapsing

A container whose children are all floated has no height, because a float is out of the normal flow and the parent has nothing left to measure. The traditional fix is an empty <div class="clear"> at the end of the container — presentational markup that has to be maintained in every template that produces one. The generated-content version puts it in the stylesheet instead.

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

.group:after {
    clear: both;
}

/* IE7 and below have no :after at all; the star hack triggers hasLayout */
.group {
    *zoom: 1;
}

The choice of display: table over display: block is the part that looks arbitrary and is not. A generated table box establishes a formatting context that also stops the first child’s top margin escaping through the top of the container, which is why the :before rule is there at all — it has nothing to do with clearing. If margin collapse is not a concern, :after alone with display: block does the job. The alternative worth knowing is overflow: hidden on the parent, which clears in one declaration and clips anything that has to overhang: a dropdown menu, a tooltip, a box shadow. That makes it a shorter fix and not a drop-in replacement, and the failure it produces — a menu that opens and is invisible — takes a surprisingly long time to trace back to a clearfix decision.