Le positionnement
float
La propriété CSS float spécifie qu'un élément doit être retiré du flux normal et placé à la droite ou à la gauche de son bloc conteneur, où le texte et les éléments en-ligne se répartiront autour de lui.
left : flotte à gauche
right : flotte à droite
inherit : hérite des propriétés de son élément parent
.float { float: left; }
Arrêter le float (sortir du flux)
.clear { clear: both; }
clear
La propriété CSS clear définit si un élément peut être à côté des éléments flottants qui le précèdent ou s'il doit être placé en dessous d'eux (être libéré).
Lorsqu'elle s'applique à des blocs non flottants, elle déplace la bordure de l'élément vers le bas, jusqu'à ce qu'elle soit en dessous des marges de tous les éléments flottants appropriés. Ce déplacement (lorsqu'il survient) empêche la Fusion des marges.
Lorsqu'elle s'applique à des éléments flottants, elle déplace la marge de l'élément jusqu'à ce qu'elle soit en dessous des marges de tous les éléments flottants appropriés. Ceci affecte la position des éléments flottants qui suivent, car ils ne peuvent pas être positionnés plus haut que les précédents.
Les éléments flottants qui peuvent se libérer sont ceux qui se trouvent au début d'un même contexte de formation de blocs.
none : L'élément n'est pas déplacé vers le bas pour se libérer des éléments flottants précédents.
left : L'élément est déplacé vers le bas pour se libérer des éléments flottants à gauche.
right : L'élément est déplacé vers le bas pour se libérer des éléments flottants à droite.
both : L'élément est déplacé en dessous des éléments flottants de gauche et de droite.
.after { content:''; /*contient rien*/ display: block; /*repasse en block*/ clear: both; /*annule le flottement à gauche et à droite et place le en dessous*/ }