4

Olá estou aprendendo agora a mexer com css, e cai numa situação que não achei em nenhum lugar a resposta, ficarei muito grato se alguem puder me ajudar.

.pai-com-overflow{
  border: 1px solid red;
  overflow:hidden;
  margin-bottom: 20px;
}

.pai-sem-overflow {
   border: 1px solid red;
}

.filho {
   float: left;
}
<div class="pai-com-overflow">
  <div class="filho">
    CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO 
  </div>
</div>

<div class="pai-sem-overflow">
  <div class="filho">
    CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO 
  </div>
</div>

Neste exemplo eu tenho uma div pai e uma div filho, a div filho está com float: left e é ai que não compreendi, e a pergunta é :

Pq quando eu tenho uma div filho com float: left e o pai com overflow:hidden, a div pai fica preenchida assumindo altura e largura e a sem overflow: hidden não.

Obrigado.

1 Resposta 1

2

Isso tem raízes históricas

Se você está procurando uma explicação da lógica por trás desse comportamento, esqueça – e isso vale para muitas outras dúvidas de CSS.

A referência mais antiga disso que encontrei na especificação do CSS é de 2011, numa das muitas revisões do CSS 2.1. Lá está dito apenas que é assim que os browsers devem se comportar:

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

A versão de 2008 ainda não falava nada sobre isso. Portanto antes de 2011 isso nem era um coportamento "oficial".

Mas bem antes disso já era assim que os browsers se comportavam. Juntando um pouco da minha memória com um documento que está sumindo da web (pt-br), dá pra afirmar que isso vem do Internet Explorer, certamente de antes de 2005, provavelmente ainda do final dos anos 1990. Existia, e capaz que ainda exista na base de código da Microsoft, uma propriedade interna do IE que determinava um pacote de comportamentos visuais dos elementos na hora da renderização. Chamava-se hasLayout.

Nunca houve muita documentação da Microsoft sobre isso, já que era uma propriedade de uso interno do browser. Hoje ainda alguns vestígios dela na documentação do IE, ao tratar dos modos legados. Coube a um grupo de "evangelistas dos padrões web" testar e documentar informalmente como o código CSS podia atribuir hasLayout aos elementos no IE, no documento que já linkei acima, e cuja primeira versão é de 2005. Por anos antes disso, simplesmente não existia documentação sobre o assunto, e float também nem era muito usado (teve muitos bugs de implementação no IE durante muitos anos).

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .