D'après Mozilla Developer Network (MDN)

La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant.

La réalité complète est en fait un peu plus complexe et difficile à décrire.

Tout d'abord, donnons les valeurs possibles de la propriété float :

La valeur none (le défaut) indique que l'élément ne doit pas être flottant et inherit, que la propriété doit être héritée de l'élément parent. Quant aux valeurs left et right, elles indiquent que l'élément doit flotter à gauche ou à droite.

Le principe de base des éléments flottants est que si E est un élément non flottant dont le code précède le code de l'élément flottant F dans le fichier HTML, F ne peut pas apparaître plus haut que E dans la page web.

La figure 3 illustre le comportement d'un élément de niveau bloc flottant à gauche, en supposant que le code de cet élément figurerait entre les codes des deux premiers paragraphes : l'élément monte le plus haut possible tout en respectant le principe de base et, une fois là, se déplace le plus possible vers la gauche

Si la première division flottante était suivie d'une seconde, elle aussi flottant à gauche, cette dernière

Dans la situation de la figure 4, si on veut que la deuxième division flottante soit sous la première plutôt qu'à côté d'elle, on peut y arriver avec la propriété clear (figure 5).

Cette propriété à pour valeurs possibles :

La directive clear: left; indique qu'un élément doit être plus bas dans la page web que tout élément flottant à gauche déclaré avant lui dans le code HTML. La directive clear: right; a un effet analogue avec les éléments flottant à droite. Quant à la directive clear: both;, elle équivaut à l'utilisation simultanée de clear: left; et clear: right;.

Soit E un élément de niveau bloc pour qui la propriété overflow a la valeur visible (valeur par défaut). Pour E, c'est comme si un élément flottant F frère ou enfant avait une largeur et une hauteur nulles. Ceci entraîne les conséquences suivantes :

• Si F est frère de E, F peut librement empiéter sur sur l'arrière-plan de E, comme dans la figure 6.
• Si F est enfant de E, F peut déborder des limites de E sans aucun problème, comme dans la figure 8.

Ces comportements ne sont pas nécessairement désirables, surtout dans le second cas. Comment peut-on y remédier ?

Il existe une façon particulièrement simple d'y arriver. Il se fait que si, pour la propriété overflow de l'élément E, on prend comme valeur n'importe quoi d'autre que visible, E devient brusquement conscient des dimensions des éléments flottants. Donc, en utilisant la déclaration overflow: hidden; pour E, qui a un élément flottant F comme frère, on passe par exemple de la situation de la figure 6 à celle de la figure 7. À noter qu'on choisit la valeur hidden plutôt qu'une autre pour éviter les barres de défilement.

De la même manière, pour éviter qu'un élément flottant F déborde de son élément parent (situation qui déroute toujours les débutants), on peut se contenter d'utiliser la déclaration overflow: hidden; pour l'élément parent (figures 8 et 9).

On trouvera d'autres exemples dans la page sur la simulation, un peu plus loin.