Float e overflow – Altura de elemento com filhos flutuantes

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!

Tags:

Comentários

  • Moacir

    Já tentou usar clearFix?