Dicas CSS: Utilizando a propriedade “overflow” como alternativa para limpar floats

No desenvolvimento de sites com blocos flutuantes a utilização da propriedade CSS “clear: both” não é apenas comum, como fundamental. Entretanto, colocar uma “div” apenas para limpar as flutuações de bloco não é apenas deselegante, como também fora dos padrões W3C, que recomenda que se evite utilizar o elemento “div” sem que haja necessidade.

Mas afinal, como poderíamos então resolver algumas situações corriqueiras sem utilizar tal recurso? Simples, utilizando a propriedade “overflow”. Utilizando “overflow” no container “pai” você poderá flutuar os elementos filhos sem afetar o próximo elemento, como demonstra a figura abaixo:

A propriedade também funciona bem para evitar que o texto circunde uma imagem que está flutuando como é possível ver no exemplo abaixo:

Para evitar que o mesmo ocorra com imagens, a saída é utilizar a propriedade “width: 100%” na imagem que entrará dentro do container.