Clearfix et hauteur du parent en CSS

Laissons une seule div avec la classe parent, retirons-en le texte, en ne laissant que l'image flottante. Comme vous le savez déjà, dans ce cas la hauteur de la div va s'effondrer à zéro, il n'en restera que la bordure supérieure et inférieure. L'image dépassera de notre div par le bas :

html<div class="parent">
  <img src="img.png" alt="">
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

Результат:

Faisons en sorte que l'image flottante étende notre div en hauteur. Pour cela, on utilise une astuce ingénieuse - plaçons après l'image une div sans texte avec la classe clearfix.

Notre image est un élément flottant et n'étend pas le parent en hauteur, mais la div clearfix - n'est pas flottante et influence la hauteur du parent.

Comme la propriété clear est définie pour la div clearfix, il en résultera qu'elle sera repoussée par l'image vers le bas et se tiendra en dessous d'elle, étendant ainsi le parent en hauteur.

La div clearfix elle-même est vide et n'est pas visible à l'écran, mais en même temps, elle étend le parent en hauteur.

Alors, essayons :

html<div class="parent">
  <img src="img.png" alt="">
  <div class="clearfix"></div>
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат: