CSS conteneur div n’obtenant ne pas de hauteur

Question

Je veux que mon conteneur div ait la hauteur maximale de la taille de ses enfants. sans savoir quelle hauteur les divs enfants vont avoir. J'essayais sur http://jsfiddle.net/gtdfY/2/ Le conteneur div est en rouge. qui ne se présente pas. Pourquoi ?

Answer 1

Ajouter la propriété suivante:

.c{
    ...
    overflow: hidden;
}

Cela va forcer le conteneur afin de respecter la hauteur de tous les éléments à l'intérieur de celui-ci, indépendamment des éléments flottants.
http://jsfiddle.net/gtdfY/3/

Mise à JOUR

Récemment, je travaillais sur un projet nécessitant de ce truc, mais nécessaire pour permettre à débordement à l'exposition, ainsi au lieu de cela, vous pouvez utiliser un pseudo-élément pour effacer votre flotte, de l'efficacité pour atteindre le même effet tout en permettant à débordement sur tous les éléments.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

Answer 2

Vous faites flotter les enfants, ce qui signifie qu'ils "flottent" devant le conteneur. Afin de prendre la bonne hauteur, vous devez "effacer" le flotteur

Le div style = "clear: both" efface le flottant et donne la hauteur correcte au conteneur. voir http://css.maxdesign.com.au/floatutorial/clear.htm pour plus d'informations sur les flotteurs.

par exemple.

 <div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
 

Answer 3

Ce n'est pas si facile?

 .c {
    overflow: auto;
}
 

Answer 4

Essayez d'insérer cette division de compensation avant le dernier </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>