One pitfall or gotcha you need to watch out for using overflow: hidden is that elements inside that container that are positioned absolutely and need to spill outside that container (like a JavaScript powered drop-down menu near the bottom of the container) get truncated/clipped to the overflow: hidden styled container. It won’t appear outside of the container at all because of the overflow: hidden.

Other values of overflow cater for this by applying scrollbars to the container, so the design goes right out of the window.

Still, if absolutely positioned child elements are not needed, overflow: hidden is a great alternative to the content:after self-clearing method.

#wrapper {
   overflow: hidden;
   _zoom: 1
}

Of course, this only works on elements that don’t have an explicit height, but is decidedly less fiddly. What’s more, the above actually *contains* the float, rather than clears it, so you can style #wrapper with the full knowledge that it’ll contain its floated children.

The problem with the :after fix is that designs tend to have a lot of elements that need clearing. One option to deal with this is to duplicate this fix multiple times for each element that needs to be cleared, resulting in CSS bloat. Alternatively, you could use a generic class selector (i.e. ‘clearfix‘) and apply that class to all the elements that need to be cleared, but that pollutes the markup with stylistic class names.

The above approach is short enough to be repeated multiple times and not make the CSS file unreadable. You do have to add a comment to make sure that other developers know what you’re doing, though.