Como fazer uma div crescer em altura enquanto tiver flutuadores dentro

121

Como posso fazer uma div aumentar sua altura quando ela flutua dentro dela? Eu sei que definir um valor para a largura e definir o estouro para trabalhos ocultos. O problema é que eu preciso de uma div com o estouro visível. Alguma ideia?

css html overflow css-float pedrozath
fonte

Respostas:

278

overflow:auto;na div que contém faz com que tudo dentro dela (até itens flutuantes) fique visível e a div externa envolva-os completamente. Veja este exemplo:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
Expandir snippet

JakeParis
fonte
7
Sim, meio que funciona, mas tem o risco de gerar barras de rolagem .. certo?
pedrozath
1
Não, não que eu saiba do @pedro. A div externa deve continuar expandindo para envolver as divs internas. tente no violino, aumente as dimensões dos divs internos e veja o que acontece.
precisa saber é o seguinte
2
Eu tentei isso e uma pequena barra de rolagem com cerca de dois metros de altura apareceu à direita da janela do navegador.
Nigel Alderton
1
@ NigelAlderton isso estava acontecendo para mim porque eu estava forçando a altura do contêiner (onde overflowfoi adicionado). Fixa-lo removendo o overflow: auto;da classe, bem como o heightseletor
eggy
16

Há mais de uma maneira de limpar carros alegóricos. Você pode conferir alguns aqui:
http://work.arounds.org/issue/3/clearing-floats/

Por exemplo, clear:bothpode funcionar para você

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
Nikita Rybak
fonte
1
O benefício dessa abordagem é que overflow: auto;irá recortar o conteúdo (como decorações de foco) que transborda para fora do elemento, mas isso não ocorre .
26417 Dan
overflow: auto criou uma barra de rolagem horizontal para mim, então não pude usá-la. Isso funcionou perfeitamente.
Edwin Stoteler
Exatamente o que eu estava procurando. Aplicou este CSS ao pai. Ele expande a altura do pai <div>, para que o elemento flutuante permaneça dentro dele. Elegante, porque afirma claramente que: "a parte inferior dos pais deve limpar a bóia".
IAM_AL_X
12

Em muitos casos, overflow: auto;será suficiente, mas para fins de conclusão e suporte entre navegadores, dê uma olhada no Clearfix, que fará o trabalho para todos os navegadores.

Vamos considerar a seguinte marcação.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Junto com os seguintes estilos ..

.content { float:left; }

.clearfix { ..from link.. }

Sem o clearfix, o pai divnão teria altura devido a filhos flutuantes. O clearfix fará com que o pai considere os filhos flutuantes.

miphe
fonte
2
Clearfix é uma marcação extra. Basta dar o div pai a marcaçãooverflow: auto;
JakeParis
7

Eu achei que uma ótima maneira de fazer isso é definir display: tableo div.

pedrozath
fonte