O div do contêiner CSS não está obtendo altura

116

Eu quero que meu div do contêiner obtenha a altura máxima de seus filhos. sem saber que altura divvai ter a criança . Eu estava testando no JSFiddle . O contêiner divestá vermelho. que não está aparecendo. Por quê?

css css-float liquid-layout

— Neel Basu
fonte

282

Adicione a seguinte propriedade:

.c{
    ...
    overflow: hidden;
}

Isso forçará o contêiner a respeitar a altura de todos os elementos dentro dele, independentemente dos elementos flutuantes.
http://jsfiddle.net/gtdfY/3/

ATUALIZAR

Recentemente, eu estava trabalhando em um projeto que exigia esse truque, mas precisava permitir que o estouro fosse exibido, então, em vez disso, você pode usar um pseudoelemento para limpar seus flutuadores, obtendo efetivamente o mesmo efeito enquanto permite o estouro em todos os elementos.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— Nightfirecat
fonte

8

Basicamente, adicionar esta propriedade força a caixa externa a ignorar a regra que os contêineres flutuantes têm, onde eles não são calculados em altura para os contêineres, e os aplica para o desenho de fundo completo.

— Nightfirecat

4

Uau, eu disse, "O quê? Isso não vai funcionar." Mas serei certeiro. Eu pensei totalmente que não iria se comportar corretamente. Obrigado

— fie

1

Isso não é meio hacky, realmente? Para mim, isso anula o propósito de estouro. Não entendo por que essa é a resposta correta e mais votada.

— Andrew Weir

3

@AndrewWeir Vou admitir, até agora, não tinha certeza de por que esse método de expandir contêineres para considerar corretamente os flutuadores em seu tamanho funcionava. De acordo com várias fontes , parece que isso faz com que um elemento mude seu modo de renderização, de permitir o estouro visível para não fazê-lo, e ao fazer isso, isso força os elementos a impedirem esse estouro.

— Nightfirecat

2

A primeira maneira, usando overflow, funciona para mim. A segunda maneira TAMBÉM funciona e parece menos arriscada caso eu tenha transbordamento no futuro. Eu só gostaria de poder votar duas vezes.

— Tyler Collier

28

Você está fazendo os filhos flutuarem, o que significa que eles "flutuam" na frente do contêiner. Para obter a altura correta, você deve "limpar" o flutuador

O div style = "clear: both" limpa o flutuante e fornece a altura correta para o contêiner. consulte http://css.maxdesign.com.au/floatutorial/clear.htm para obter mais informações sobre flutuadores.

por exemplo.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— Yoeri
fonte

Isso claro: ambos; coisa parece ser uma solução adequada para a altura do contêiner, porque o problema são os filhos flutuantes. Portanto, essa abordagem parece melhor do que o estouro: oculto; um acima.

— Ronnie Depp,

Obrigado @Yoeri por compartilhar esta solução simples. Estou procurando a mesma solução para meu novo design, pois já faz quase 6 anos desde a última vez que projetei um layout da web, depois de me concentrar exclusivamente na perspectiva de desenvolvimento de PHP, em vez do lado do design.

— Ronnie Depp

20

Não é assim tão mais fácil?

.c {
    overflow: auto;
}

— Antonio Romero Oca
fonte

Sim, é: D. Obrigado

— Alauddin Ahmed

4

Tente inserir este div de limpeza antes do último </div>

<div style="clear: both; line-height: 0;"> </div>

— Lee
fonte

3

A melhor ea solução mais à prova de balas é adicionar ::beforee ::afterpseudoelements ao recipiente. Portanto, se você tiver, por exemplo, uma lista como:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

E todos os elementos da lista têm float:leftpropriedades, então você deve adicionar ao seu css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Ou você pode tentar a display:inline-block;propriedade, então você não precisa adicionar nenhum clearfix.

— Ágata
fonte