Mise en page avec float & clear

La propriété float est une des plus utilisées pour structurer une mise en page [ avant que n’arrivent flexbox et grid ], mais son usage est parfois délicat. Elle spécifie qu'un élément doit être retiré du flux normal et placé à la droite ou à la gauche du bloc qui le contient. Le texte et les éléments inline adjacents se répartiront autour de lui.

Dans son usage le plus simple, la propriété float permet d’habiller une image avec du texte :

Cette jolie lettre ornée est l’œuvre de Joseph Apoux, peintre et illustrateur français de la fin du XIXe siècle proche du décadentisme (dixit wikipedia). Joseph Apoux étudie la peinture et le dessin avec Jean-Léon Gérôme. (…) On lui doit notamment cet Alphabet pornographique, dont est issu cette image, et qui grace à la propriété float permet de créer une lettrine (notabene: la propriété p:first-letter permettrait de le faire de manière plus élégante, et/ou sans utiliser d’image). Pour plus de typographie érotique, voir Max Bruinsma.

img { float:left; margin: 0 15px 0 -4px; }
/* la marge droite négative permet d’aligner *optiquement* l’image sur la colonne de texte */

Deux colonnes

En utilisant une boîte flottante, on peut ainsi créer deux colonnes :

On affecte une marge à l’article, pour « laisser la place » à l’élément `

Multiples colonnes

En juxtaposant des boîtes flottantes, on peut créer une mise en page en plusieurs colonnes régulières… [ mais il vaut mieux utiliser flex et grid ]

.col
.col
.col
.col
.col
.col {
    float:left;
    width:20%;
}

…ou irrégulières :

.col.one
.col.two
.col.three
.col   { float:left; height:100px; }
.one   { width:14.2857%;}
.two   { width:28.5714%;}
.three { width:57.1429%;}

Clear et overflow

Un problème se pose cependant ; l’élément conteneur n’est plus affecté par l’élément flottant ( on l’a « sorti du flux »). L’élément flottant peut donc « dépasser » de son conteneur.

Pour résoudre ce problème, de multiples solutions s’offrent ; la plus simple est ce définir la propriété overflow du conteneur avec la valeur auto. Et quand ça ne suffit pas, il faut aller chercher dans le monde merveilleux du clearfix…

Clear

La propriété clear sert à contraindre l’élément qui suit un élément flottant à passer en dessous. Les valeurs possibles de clear sont left, right ou both (c’est la valeur qu’on utilise le plus souvent).

article{ clear:both; }