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

131

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.

html css

— Chris Stryczynski
source

4

Cela pourrait vous être utile CSS Floats 101 , de A List Apart .

— David dit de réintégrer Monica

250

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.

— Quentin
source

Voici une autre approche pour faire en sorte que les conteneurs contiennent des flottants qui sont résolus en CSS sans avoir à ajouter des éléments à la page.

— Phil

56

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

Pour éviter cela, ajoutez overflow: hiddenau parent.

— SLaks
source

16

Merci, cela fonctionne, mais je ne comprends pas pourquoi ... overflow: hidden est censé cacher le contenu qui déborde, pas agrandir l'élément pour le contenir.

— ripper234

@ ripper234 Voici pourquoi: stackoverflow.com/questions/25818199/…

— kristianp

6

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

— Melih
source

1

C'était la solution exacte que je recherchais. Débordement: caché cause la disparition de l'ombre de la boîte, naturellement.

— Kitiara le