Conteneur CSS div ne reçoit pas de hauteur

Je veux que mon div soit au maximum de la taille de ses enfants. sans savoir quelle hauteur auront les enfants. J’essayais sur JSFiddle . Le div conteneur est en rouge. qui ne se montre pas. Pourquoi?

Ajoutez la propriété suivante:

 .c{ ... overflow: hidden; } 

Cela obligera le conteneur à respecter la hauteur de tous les éléments qu’il contient, indépendamment des éléments flottants.
http://jsfiddle.net/gtdfY/3/

METTRE À JOUR

Récemment, je travaillais sur un projet qui nécessitait cette astuce, mais il fallait autoriser le débordement à afficher. Au lieu de cela, vous pouvez utiliser un pseudo-élément pour effacer vos flottants, réalisant ainsi le même effet tout en permettant un débordement sur tous les éléments.

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

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

Vous faites flotter les enfants, ce qui signifie qu’ils «flottent» devant le conteneur. Pour prendre la bonne hauteur, vous devez “effacer” le flotteur

Le div style = “clear: both” efface le flottant et donne la bonne hauteur au conteneur. voir http://css.maxdesign.com.au/floatutorial/clear.htm pour plus d’informations sur les flottants.

par exemple.

 
World

Ce n’est pas si facile?

 .c { overflow: auto; } 

Essayez d’insérer cette division avant la dernière

 

La meilleure et la plus résistante des solutions consiste à append les pseudo-éléments ::before et ::after after au conteneur. Donc, si vous avez par exemple une liste comme:

 

Et chaque élément de la liste a une propriété float:left , alors vous devriez append à votre css:

 .clearfix::after, .clearfix::before { content: ''; clear: both; display: table; } 

Ou vous pouvez essayer display:inline-block; propriété, alors vous n’avez pas besoin d’append de clearfix.