Olá, pessoal!
Existem vezes (principalmente quando estamos trabalhando com conteúdo flutuante), que esperamos que o div (ou elemento) pai "abrace", acompanhe todo o conteúdo interno. Porém nem sempre é assim que acontece.
Muitas vezes esse elemento pai fica limitado a um ínfimo height enquanto seu conteúdo interno percorre jogado pelo restante da página.
Vejamos um exemplo ilustrativo:
Podemos imaginar a estrutura do nosso elemento pai (retângulo amarelo na imagem acima) da seguinte forma:
E layout css da seguinte forma:
#ELEMENTO_PAI{
width:98%;
height:auto;
}
.PROFILES{
width:98%;
height:auto;
}
.PROFILES li{
width:200px;
height:300px;
float:left;
margin-left:20px;
}
Existe uma forma (INCORRETA) de corrigir esse problema, como segue:
.CLEAR{
clear:both;
}
Dessa maneira, com o clear:both; obrigamos o #ELEMENTO_PAI a se estender até este div que está "resetando" a partir daquele ponto qualquer interação do float com os demais elementos na página.
Bem, como disse ali acima, isto é uma work around, ou para os mais chegados, GAMBIARRA.
Mas afinal qual a maneira correta de se fazer?
Corrigindo o bug de uma forma simples e eficaz:
Como queremos que nosso elemento pai abrace todo o conteúdo e que o conteúdo seja criado dinamicamente sem restrições, não podemos estabelecer um height para o elemento. Sendo assim ele continuará com o height:auto;.
Agora vamos adicionar um estilo ao #ELEMENTO_PAI que o obriga a trabalhar com barras de rolagem:
#ELEMENTO_PAI{
width:98%;
height:auto;
overflow:hidden;
}
Overflow ou Barras de rolagem exigem que o elemento tenha uma altura fixa ou máxima estabelecida para fazer com que os elementos internos o percorram com a ação da barra de rolagem.
Quando estabelecemos overflow:hidden; para um elemento, estamos obrigando o elemento a cortar a exibição de todo o conteúdo interno que excede seu tamanho. Também não existe barra de rolagem visível. Vejamos um exemplo:
No nosso caso, como nosso height continua setado para auto, então o overflow:hidden; não tem altura especificada para cortar o conteúdo interno, sendo assim vai obrigar o #ELEMENTO_PAI a se estender por todo o seu conteúdo interno.
Vejamos o resultado final:
É isso. De forma muito simples e profissional, apenas adicionando overflow:hidden; ao layout do nosso #ELEMENTO_PAI já garantimos que ele abraçará todo o seu conteúdo interno independente de sua extenção.