Float e overflow – Altura de elemento com filhos flutuantes

  • Última modificação: 30/06/2011
  • Tempo de leitura: 2 min.

Acho que todo mundo já passou por isso: você está fazendo um css rapidinho, um elemento tem uma imagem de fundo e alguns elementos como filho. Você dá um refresh pra ver como está ficando e a imagem de fundo simplesmente não “estica” o suficiente.

Se você tem um elemento html e os últimos filhos dele estão flutuando, isto é, tem no css um “float: left;” ou “float: right;”, a altura do elemento pai será calculada até o fim dos últimos elementos sem flutuação. Pra resolver existem algumas maneiras:

  1. Overflow: se você colocar um “overflow: hidden;” no elemento pai resolve, mas você terá problemas se (1) o elemento tiver altura ou largura – ele vai cortar tudo o que ultrapassar a altura e/ou largura determinada – ou (2) se você precisar que algum elemento filho “vaze”, por exemplo, tenha um margin-top negativo. Essa é a minha favorita.
  2. Display: table: não é a mais legal, mas funciona. Em algumas versões antigas do Firefox dava problema, mas resolveram.
  3. Adicionar um elemento no final do elemento pai: faz seu html ter um lixo não semântico sem significado lá, uma div vazia, por exemplo, mas vai quebrar o galho caso nada mais funcione.

Passo aqui pra postar coisinhas rápidas, mas são as coisas que vejo dando dor de cabeça pra galera.

UPDATE: nos comentários o Moacir comentou sobre o clearFix, que me pareceu uma solução bem interessante. Há muito tempo dava problema, mas foram modificando até dar certo em todos os navegadores. Valeu Moacir!

Felipe Elia

Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.

Este post tem um comentário

  1. Moacir

    Já tentou usar clearFix?

Comentários encerrados.