force content wrap to respect floated neighbors

Here's the scenario:

You want a clean margin / wrap for content that lives next to a floated element.

Add overflow:hidden to the main (non-floated) content and voilà! Your non-floated content will now respect the edge of the floated content and wrap accordingly.

In the HTML (and pictures) below, div.unit is floated left, while div.item is not floated at all.

HTML
<li class="ingredient">
<div class="unit">175g (6oz)</div>
<div class="item">unsalted butter</div>
</li>

Non-wrapped content (sans overflow:hidden)

Wrapped content (with overflow:hidden)