Ciao, per poter comprendere meglio cosa sta avvenendo bisognerebbe vedere la pagina in azione e le altre eventuali regole css che influiscono su tali elementi; ma ad ogni modo, vedendo le immagini, posso dedurre che il problema sia legato al fatto che gli elementi non hanno tutti una stessa altezza. Il float infatti dispone gli elementi cercando di occupare lo spazio libero secondo due principali criteri: l'ordine di priorità con cui gli elementi si presentano nel DOM e il più in alto possibile.
Dalle tue immagini si può vedere (anche se la differenza tra le altezze è minima) la situazione che schematizzo in questo modo (accentuando chiaramente le differenze):
codice:
Disposizione elementi flottanti
con altezze differenti
_________ _________ _________
| | | |
| 1 | 2 | 3 |
| | | |
| | | |
|_________| | |
| |_________|
|_________| |
| 4 |
| |
| |
| |
_________ _________|_________|
| | | |
| 5 | 6 | 7 |
| | | |
: : : :
In particolare 3 ha un'altezza maggiore di 1 e minore di 2.
4 potrebbe mettersi sotto 1, secondo il criterio "il più in alto possibile", ma deve invece mettersi sotto 3 per soddisfare entrambe i criteri: "ordine di priorità" e "il più in alto possibile".
4 infatti non può stare sotto 1 perché sarebbe una posizione in cui 2 e 3 non sono "conclusi"; deve stare quindi dopo la fine di 3, dove trova posto.
Detto questo, puoi risolvere impostando un'altezza fissa. Oppure, se l'intenzione è quella di creare una disposizione a griglia, ad esempio usando flexbox. Noto però che probabilmente stai usando un sistema "sortable", per cui hai possibilità di spostare gli elementi; in questo caso non so quale potrebbe essere la soluzione più adatta senza rischiare di sfasciare qualcos'altro. Se puoi impostare un'altezza fissa forse è sufficiente quello. Fai delle prove.