Dlaczego nadrzędny element div ma zerową wysokość, skoro ma zmiennoprzecinkowe elementy podrzędne

W moim CSS mam następujące elementy. Wszystkie marginesy / wypełnienia / obramowania są globalnie resetowane do 0.

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

Teraz, kiedy piszę mój HTML jako

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

strona renderuje się poprawnie. Jednak kiedy sprawdzam elementy, div#wrapperjest pokazany jako 0pxwysoki. Spodziewałbym się, że rozwinie się do końca div.contenti div.lbar... Dlaczego tak się dzieje?

Ponownie strona renderuje się dobrze. To zachowanie po prostu mnie wprawia w zakłopotanie.

Pływająca zawartość nie wpływa na wysokość jej kontenera. Element nie zawiera żadnej treści, która nie jest zmienna (więc nic nie zatrzymuje wysokości kontenera równej 0, tak jakby był pusty).

Ustawienie overflow: hiddenw kontenerze pozwoli tego uniknąć, ustanawiając nowy kontekst formatowania bloku . Zobacz metody zawierające elementy zmiennoprzecinkowe dla innych technik i zawierające elementy pływające, aby wyjaśnić, dlaczego CSS został zaprojektowany w ten sposób.

Zwykle, float nie są one uwzględniane w układzie ich rodziców.

Aby temu zapobiec, dodaj overflow: hiddendo rodzica.

Nie jestem pewien, czy to właściwy sposób, ale rozwiązałem to, dodając display: inline-block;do elementu div 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%;
}