Warum ist die übergeordnete Div-Höhe Null, wenn sie untergeordnete Elemente schwebt?

Ich habe folgendes in meinem CSS. Alle Ränder / Auffüllungen / Ränder werden global auf 0 zurückgesetzt.

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

Jetzt schreibe ich mein HTML als

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

Die Seite wird korrekt gerendert. Wenn ich jedoch die Elemente inspiziere, div#wrapperwird dies als 0pxhoch angezeigt . Ich hätte erwartet, dass es sich bis zum Ende ausdehnt div.contentund div.lbar... Warum passiert das?

Auch hier wird die Seite gut gerendert. Dieses Verhalten verwirrt mich nur.

Schwebende Inhalte haben keinen Einfluss auf die Höhe des Containers. Das Element enthält keinen Inhalt, der nicht schwebt (nichts hindert die Höhe des Containers daran, 0 zu sein, als wäre er leer).

Durch das Festlegen overflow: hiddendes Containers wird dies vermieden, indem ein neuer Blockformatierungskontext erstellt wird . Unter Methoden zum Enthalten von Floats für andere Techniken und zum Enthalten von Floats finden Sie eine Erklärung, warum CSS auf diese Weise entwickelt wurde.

Normalerweise werden floats im Layout ihrer Eltern nicht berücksichtigt.

Um dies zu verhindern, fügen Sie overflow: hiddendem übergeordneten Element hinzu.

Ich bin mir nicht sicher, ob dies der richtige Weg ist, aber ich habe ihn gelöst, indem ich ihn display: inline-block;zum Wrapper-Div hinzugefügt habe.

#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%;
}