Por que o div principal tem altura zero quando possui filhos flutuantes

Eu tenho o seguinte no meu CSS. Todas as margens / preenchimentos / bordas são redefinidas globalmente para 0.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Agora, quando eu escrevo meu HTML como

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

a página é renderizada corretamente. No entanto, quando inspeciono os elementos, div#wrapperé mostrado como 0pxalto. Eu teria esperado que ela se expanda até o fim do div.contente div.lbar... Por que isso acontece?

Novamente, a página é renderizada corretamente. Esse comportamento me deixa perplexo.

O conteúdo flutuante não influencia a altura do contêiner. O elemento não contém conteúdo que não esteja flutuando (portanto, nada impede que a altura do contêiner seja 0, como se estivesse vazio).

A configuração overflow: hiddenno contêiner evitará isso, estabelecendo um novo contexto de formatação de bloco . Consulte métodos para conter floats para outras técnicas e para conter uma explicação sobre por que o CSS foi projetado dessa maneira.

Normalmente, floats não são contados no layout de seus pais.

Para evitar isso, adicione overflow: hiddenao pai.

Não sei se esse é o caminho certo, mas o resolvi adicionando display: inline-block;ao div do wrapper.

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}