forçar a quebra do conteúdo para respeitar os vizinhos flutuantes

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 )
Cenário

Conteúdo empacotado ( com estouro: oculto )
Cenário