Effacer les flottants dynamiquement avec CSS

Question

J'essaie de créer une mise en page de blog à 3 colonnes en CSS. Pour chaque nouveau message, il y aura un nouveau div ajouté dynamiquement à l'intérieur d'un conteneur div.

Cependant, je rencontre des problèmes avec l'effacement des flottants puisque je ne peux pas placer un élément clair manuellement.

est ici à quoi il ressemble maintenant: http://jsfiddle.net/DZASD/

Et voici ce que je veux que ça ressemble à: http://jsfiddle.net/DZASD/1/

Je veux être en mesure de le faire sans mettre manuellement le <div style="clear:both;"> après la 3e div. Existe-t-il un moyen d'effacer sélectivement les éléments flottants après chaque 3e div, même s'il y a des divs potentiellement infinis à ajouter?

Merci!

Answer 1

Vous pouvez utiliser le sélecteur css nth-child pour appliquer clear à chaque troisième élément.

CSS

.box:nth-child(3n + 1) { 
    clear: both; 
} 

Demo

How nth-child works

Note: nth-child est not supported by IE8 and less.