Réponses:
Ajoutez la propriété suivante:
.c{
...
overflow: hidden;
}
Cela forcera le conteneur à respecter la hauteur de tous les éléments qu'il contient, quels que soient les éléments flottants.
http://jsfiddle.net/gtdfY/3/
Récemment, je travaillais sur un projet qui nécessitait cette astuce, mais qui avait besoin d'autoriser le dépassement de capacité, donc à la place, vous pouvez utiliser un pseudo-élément pour effacer vos flottants, obtenant ainsi le même effet tout en permettant le débordement sur tous les éléments.
.c:after{
clear: both;
content: "";
display: block;
}
Vous faites flotter les enfants, ce qui signifie qu'ils «flottent» devant le conteneur. Afin de prendre la bonne hauteur, vous devez "dégager" le flotteur
Le style div = "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 flotteurs.
par exemple.
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
La meilleure et la plus sûre des solutions consiste à ajouter des pseudo ::before
- ::after
éléments au conteneur. Donc si vous avez par exemple une liste comme:
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
Et chaque élément de la liste a une float:left
propriété, alors vous devez ajouter à votre css:
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Ou vous pouvez essayer la display:inline-block;
propriété, alors vous n'avez pas besoin d'ajouter de clearfix.