Le bien, le mal

Cette technique est compatible avec tous les navigateurs mais contourne l’usage des flottants float.
Le principe est simple, tous les éléments d’un bloc parent ont un float:left;/* ou right */ et le père doit être hacké avec une class généralement nommée clearfix ou clear.
Si le père n’est pas clearfixé, il perd sa hauteur « naturelle » néanmoins il garde son padding (le fond orange du premier exemple ci-dessous), un effet indésirable.
Autrefois, on ajoutait un
avec un clear:both mais depuis le CSS2, il est facile d’ajouter un élément pseudo-element avec :after.

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
Astuce de graphiste : vous ne comprenez pas le code ci-dessus, rien de grave. Plusieurs options s’offrent à vous, bidouillez le CodePen, lire le MDN ou revenir dessus dans 6 mois. En attendant, appliquez-le bêtement ou utilisez flexbox.

See the Pen clearfix by Benoît Wimart (@benoitwimart) on CodePen.