Comment puis-je empêcher les éléments flottants qui se chevauchent avec des hauteurs variables ?

Éléments flottants à hauteurs variables : éviter le déplacement des frères et sœurs

Les éléments flottants offrent une méthode pratique pour aligner le contenu horizontalement. Cependant, lorsque ces éléments ont des hauteurs variables, cela peut entraîner des problèmes d’agencement inattendus. Dans ce cas, des éléments plus grands peuvent empêcher les frères et sœurs suivants de s'aligner correctement.

Pour résoudre ce problème, CSS propose plusieurs techniques. Une de ces approches exploite le sélecteur nth-of-type() pour identifier des éléments spécifiques en fonction de leur position dans une séquence. Dans ce cas, nous pouvons utiliser la règle :nth-of-type(3n 1) pour appliquer un style spécifique au premier élément de chaque troisième ensemble d'éléments flottants.

En ajoutant cette propriété CSS, nous définissons que un élément flottant sur trois doit effacer les flottants précédents, en garantissant que la deuxième ligne s'aligne en dessous de la première :

figure:nth-of-type(3n+1) {
    clear:left;
}

Cette technique réinitialise efficacement le comportement flottant des éléments désignés, leur permettant de démarrer un nouvelle ligne, résolvant ainsi le problème de chevauchement.

Pour illustrer cela en action, visitez l'exemple JSFiddle mis à jour : [](https://jsfiddle.net/KatieK/5Upbt/).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!