Effacement du dernier élément flottant dans chaque ligne

Question

J'ai un ensemble de divs avec des hauteurs variables qui ont été flottées à gauche. Quand il y a trop de divs sur une seule ligne, le div suivant s'intègre à une nouvelle ligne (comme il se doit). Le problème que je rencontre est que la nouvelle ligne est démarrée à une position offset x sur la nouvelle ligne, de sorte que la div est sous la dernière div de la ligne précédente qui n'a pas de divs plus grands derrière elle - laissant souvent une grande marge sur le côté gauche.

div.entry 
{ 
    float: left; 
    width: 180px; 
    padding: 10px; 
} 

Je veux essentiellement pour que la dernière div.entry « rangée » (la précédente enveloppe à une nouvelle ligne) efface le flotteur, de sorte que la rangée suivante de divs flottaient sont tous alignés à la même hauteur, et n'ont pas un assez grand écart sur le côté gauche. Illustré en ASCII:

Ce que je pense arriver:

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 
+-----+ +-----+ +-----+ +-----+ 
| E | | F | | G | | H | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 

Qu'est-ce qui se passe réellement:

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ +-----+ +-----+ 
       | E | | F | 
       |  | |  | 
       +-----+ |  | 
         +-----+ 
+-----+ +-----+ 
| G | | H | 
|  | +-----+ 
+-----+ 

Michael

Answer 1

J'ai eu ce problème une fois, je pense que je suis autour de mon définir une propriété min-height pour les divs.

Ce qui m'a donné:

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 
+-----+ +-----+ +-----+ +-----+ 
| E | | F | | G | | H | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 

Answer 2

Si float: left est pas obligatoire, il y a toujours display: inline-block qui serait plus adapté pour le travail. Depuis le "flux en ligne" fonctionne déjà comme vous le souhaitez.

.item { 
    display: inline-block; 
    vertical-align: top; 
    width: 300px; 
} 

Cela se comporte à peu près correctement dans les navigateurs actuels. Voir fiddle.

Si vous voulez la compatibilité avec les anciens navigateurs, il y a un bel article sur le blog de mozilla décrivant la situation: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

Autre solution (non completly cross-browser) est d'ajouter

.item:nth-child(4n+1) { clear: left; } 

Vérifier ce http://jsfiddle.net/AfUL3/