Por que ‘estouro: auto’ limpa flutuantes? E por que os carros alegóricos são necessários?

Minha pergunta surgiu quando criei minhas primeiras colunas!

Eu tenho um invólucro para minhas colunas esquerda e direita, mas a altura do invólucro não se expandiu para encheckboxr as colunas esquerda e direita, com cada um flutuando para o lado, respectivamente.

Eu encontrei uma solução on-line onde adiciona o estilo (esta é a palavra certa?) ‘Estouro: auto’ para o wrapper. Depois de alguma pesquisa, encontrei vários artigos que explicam o que o estouro faz, incluindo esta resposta do stackoverflow: Por que “overflow: hidden” limpa um float?

No entanto, nada na minha pesquisa explica de uma maneira que eu possa entender porque a altura do wrapper não se expande automaticamente para se ajustar aos divs nesteds, as duas colunas.

Todas as coisas aninhadas dentro de uma div não estão contidas nessa div? Isso não cria limites para os elementos internos?

Qualquer ajuda é apreciada por este noobie. Obrigado!

A razão pela qual o wrapper não se estica para conter seus floats é porque os floats são retirados do stream normal do wrapper, então o wrapper age como se eles nunca estivessem lá. Se não houver outro conteúdo no wrapper, isso significa que o wrapper não terá altura alguma.

Observe que o overflow: auto não limpa os floats – apenas faz com que o elemento contenha seus floats por meio do estabelecimento de um novo contexto de formatação de bloco para que eles não interfiram em outros elementos no contexto pai. 1 Isso é o que força o pai a esticá-lo para contê-lo. Você só pode limpar um float se adicionar um elemento de limpeza após o float. Um elemento pai não pode limpar seus filhos flutuantes.

A razão pela qual o estabelecimento de um novo BFC faz com que um elemento contenha seus flutuadores seja detalhado aqui , e o motivo pelo qual o overflow: auto poderia até mesmo causar um BFC a ser estabelecido é detalhado aqui .


1 OK, talvez “apenas” não seja exatamente o melhor advérbio a ser usado.