Pourquoi la hauteur de la division parent est-elle nulle alors que ses enfants sont flottants ?

Question

J'ai les éléments suivants dans mon CSS. Toutes les marges/addings/bordures sont globalement réinitialisées à 0.

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

Maintenant, lorsque 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 , div#wrapper est montré comme étant 0px élevé. Je m'attendais à ce qu'il se développe jusqu'à la fin de l'année. div.content y div.lbar ... Pourquoi cela se produit-il ?

Là encore, la page s'affiche correctement. Ce comportement me laisse perplexe.

Answer 1

Un contenu flottant n'a pas d'influence sur 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 égale à 0, comme s'il était vide).

Réglage de overflow: hidden sur le conteneur évitera cela en établissant une nouvelle contexte de mise en forme des blocs . Voir méthodes pour contenir les flotteurs pour d'autres techniques et contenant des flotteurs pour une explication sur la raison pour laquelle CSS a été conçu de cette façon.

Answer 2

D'habitude, float ne sont pas comptabilisés dans la disposition de leurs parents.

Pour éviter cela, ajoutez overflow: hidden au parent.

Answer 3

Je ne suis pas sûr que ce soit la bonne méthode mais j'ai résolu le problème 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%;
}

Answer 4

Maintenant, vous pouvez

#wrapper { display: flow-root; }

• Compatibilité https://caniuse.com/flow-Root
• Histoire https://css-tricks.com/snippets/css/clear-fix/