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 »)