Clearing floats, the alternative way

Everyone knows about clearing elements; that annoying CSS behavour where floated elements don't affect the height of their containing element. By adding a clearing div, we force this behaviour.

<div class="parent">
    <div style="float:left;">Some left aligned content</div>
    <div style="float:right;">Some right aligned content</div>
    <div style="clear:both;"></div>
</div>

A much less known technique, and something I use 9 out of 10 times where this behaviour occurs, is just to give the parent element an overflow style of 'hidden'.

<div class="parent" style="overflow:hidden">
    <div style="float:left;">Some left aligned content</div>
    <div style="float:right;">Some right aligned content</div>
</div>

This will force the parent element to expand to the height of the child elements, eliminating the need for an unnecessary, non-semantic clearing element.