Perché l'altezza div del genitore è zero quando ha fatto galleggiare i figli

Ho quanto segue nel mio CSS. Tutti i margini / padding / bordi vengono reimpostati globalmente su 0.

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

Ora quando scrivo il mio HTML come

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

il rendering della pagina è corretto. Tuttavia, quando ispeziono gli elementi, div#wrapperviene visualizzato come 0pxelevato. Mi sarei aspettato che si espandesse fino alla fine div.contente div.lbar... Perché succede?

Ancora una volta, la pagina viene visualizzata correttamente. Questo comportamento mi lascia perplesso.

Il contenuto fluttuante non influenza l'altezza del suo contenitore. L'elemento non contiene contenuti che non sono mobili (quindi nulla impedisce che l'altezza del contenitore sia 0, come se fosse vuoto).

L'impostazione overflow: hiddensul contenitore eviterà ciò stabilendo un nuovo contesto di formattazione del blocco . Vedi i metodi per contenere float per altre tecniche e contenere float per una spiegazione sul perché i CSS sono stati progettati in questo modo.

Di solito, le floats non vengono conteggiate nel layout dei loro genitori.

Per evitarlo, aggiungi overflow: hiddenal genitore.

Non sono sicuro che questo sia il modo giusto, ma l'ho risolto aggiungendo display: inline-block;al 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%;
}