Pourquoi la hauteur du div parent est-elle nulle quand elle a des enfants flottants?

J'ai ce qui suit dans mon CSS. Toutes les marges / rembourrages / bordures sont globalement réinitialisés à 0.

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

Maintenant, quand j'écris mon HTML comme

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

la page s'affiche correctement. Cependant, lorsque j'inspecte les éléments, cela div#wrapperest indiqué comme étant 0pxélevé. Je m'attendais à ce qu'il s'étende jusqu'à la fin div.contentet div.lbar... Pourquoi cela se produit-il?

Encore une fois, la page rend bien. Ce comportement me rend perplexe.

Le contenu flottant n'influence pas la hauteur de son conteneur. L'élément ne contient aucun contenu qui ne soit pas flottant (donc rien n'empêche la hauteur du conteneur d'être 0, comme s'il était vide).

La configuration overflow: hiddensur le conteneur évitera cela en établissant un nouveau contexte de formatage de bloc . Voir les méthodes pour contenir des flottants pour d'autres techniques et contenant des flottants pour une explication sur la raison pour laquelle CSS a été conçu de cette façon.

Normalement, les floats ne sont pas comptés dans la mise en page de leurs parents.

Pour éviter cela, ajoutez overflow: hiddenau parent.

Je ne suis pas sûr que ce soit une bonne façon, mais je l'ai résolu en ajoutant display: inline-block;à la 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%;
}