Float sort les éléments du flux et ça les fait déborder de tous les côtés. Et quand il s'agit de faire des menus, ça foire aussi : si on utilise de petits écrans, l'élément flottant est renvoyé en bas et le conteneur du menu est trop petit donc il flotte sur l'élément sous le menu.

Utilisez plutôt « display: inline-block; »
Les éléments restent dans le flux, dont dimensionnables et en plus vous pouvez les centrer (il n'y a pas de float:center).