Je viens de me retrouver sur cet article qui montre comment faire des colonnes avec float et de palier au problème du clear:both sans toucher au HTML. La solution retenue — quoiqu’invalide CSS — est élégante… si on retourne en 2009 !

Car pourquoi utiliser des flottants ?

Utilisez Flexbox plutôt !

Non seulement vous n’aurez pas besoin de hack comme ça, mais en plus vous aurez la possibilité de faire des colonnes de la même hauteur.

Je n’ai rien contre float, mais son but est de faire sortir un élément de la structure de la page et de le faire flotter au dessus. À quoi ça sert d’utiliser float si on lui dit, avec clear, de se remettre dans la page ?
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Voyez le résultat ici : demo.
Et pour vous amuser, voilà un Flexbox playground, ainsi qu’un tutoriel en Français.

Je vous ferai aussi un article, bientôt, pour donner des exemples de choses possibles avec Flexbox.

(cet article est le deuxième dans la série « arrêtez d’utiliser les flottants alors qu’il y a mieux »)