Este é o cenário:
Você quer uma margem / quebra limpa para o conteúdo que fica próximo a um elemento flutuante.
Adicionar estouro: oculto ao conteúdo principal (não flutuante) e voilà! Seu conteúdo não flutuado agora respeitará a borda do conteúdo flutuante e será agrupado de acordo.
No HTML (e nas imagens) abaixo, div.unit flutua para a esquerda, enquanto div.item não flutua de forma alguma.
HTML
<li class = “ingrediente”>
<div class = “unit”> 175g (6oz) </div>
<div class = “item”> manteiga sem sal </div>
</li>
Conteúdo não empacotado ( sans overflow: hidden )
Conteúdo empacotado ( com estouro: oculto )