Les éléments flottants ou floats font partie des outils de positionnement les plus utilisés en CSS et pourtant ils sont souvent une source de tracas majeur pour les développeurs web.
Le problème du float est celui de la plupart des autres propriétés de positionnement qui « sortent de l’ordinaire », c’est-à-dire qui ne correspondent pas au positionnement par défaut. Parce qu’il applique de nouvelles règles de positionnement, un élément flottant ne peut pas être manipulé de la même façon qu’un positionnement normal si l’on souhaite avoir le résultat désiré.
En clair, vous ne pouvez pas exiger d’une cafetière qu’elle vous fasse un café si vous mettez des feuilles de thé dans le filtre sous prétexte que, ben, cette technique a toujours bien marché dans la théière. Pour que la propriété float fonctionne correctement, il faut l’utiliser avec les bons éléments.
Avant de parler de float, parlons de flux.
La notion de flux est très importante en CSS. Les éléments dans une page web sont en effet affichés au sein d’un flux, c’est-à-dire les uns à la suite des autres selon deux modes :
- en ligne (inline), à la suite sur une même ligne jusqu’à arriver à la fin de la ligne (une ligne faisant la largeur du conteneur) ;
- en bloc (block), séparés par un retour à la ligne, et donc les uns en-dessous des autres.
Un élément inline a la largeur de ce qu’il contient (longueur de texte, taille de l’image), tandis qu’un élément block prend automatiquement toute la largeur de son conteneur (sauf indication contraire avec des propriété CSS).
On en vient à la définition…
Un élément flottant est un élément positionné à la suite des autres, qui est extrait du flux et déplacé le plus à gauche possible (float: left) ou le plus à droite possible (float: right) jusqu’à ce qu’il touche les bords de son conteneur ou d’un autre élément flottant positionné avant lui.
Sa particularité est que, en tant qu’élément extrait du flux (donc « indépendant »), le contenu des éléments qui le suivent va venir flotter le long de ses bords sur toute sa hauteur pour ensuite reprendre en-dessous. On appeler cela « wrapper ».
Attention, c’est le contenu des éléments qui flotte. Non les éléments eux-mêmes. On revient sur ce point un peu plus loin.
… Et aux règles essentielles de fonctionnement d’un float.
1. Un élément flottant est automatiquement un bloc. Ce qui fait que :
- on ne peut absolument pas lui attribuer de propriétés réservées aux balises inline, ni forcer son affichage en inline. Il ne réagira tout simplement pas.
- en tant que bloc et comme nous avons pu le voir plus haut, il prendra par défaut toute la largeur de son conteneur. Tout élément flottant doit avoir une largeur attribuée avec la propriété CSS width, il n’est pas fait pour exister sans une largeur définie. Oublier ce détail peut mener à des résultats imprévisibles.
2. Non, un élément ne peut pas flotter au centre. La règle de base d’un float est d’être placé le plus à gauche (ou à droite) possible. Le float:center est donc une impossibilité quantique, et on l’oublie, de préférence.
3. La propriété CSS clear sur un contenu indique une suppression du flottement autour d’un float. Le contenu ira alors à la ligne en-dessous de l’élément flottant comme si ce dernier était un bloc positionné normalement dans le flux.

4. Le conteneur ne s’adapte pas à la taille des éléments flottants qu’il contient. Rappelons-nous qu’un float est en-dehors du flux et ne respecte donc pas les règles du flux. Si la hauteur ou la largeur d’un élément flottant est plus grande que celle de son conteneur, celui-ci dépassera, sans jamais agrandir le conteneur. Sauf sous Internet Explorer, dans le cas où le conteneur a une dimension définie, ce qui est une profanation éhontée des standards du W3C (évidemment).
En hauteur, si l’on veut que le conteneur s’adapte aux floats qu’il contient, il faut arrêter le flottement du contenu avec la propriété clear, comme vu précédemment.

5. Un élément fait flotter le contenu, non les blocs. Encore une fois, n’oublions pas que nous sommes hors du flux. Ainsi, les blocs suivant un élément flottant chevaucheront toujours ce dernier (souvent par en-dessous), seul le contenu à l’intérieur flottera. Pour faire s’aligner proprement des blocs les uns à côté des autres, il est nécessaire de tous les sortir du flux, et donc de tous les mettre en éléments flottants. En effet, rappelons la règle : un élément flottant sera positionné le plus à gauche / droite possible jusqu’à ce qu’il touche les bords de son conteneur ou d’un autre élément flottant positionné avant lui. S’il n’y a plus assez de place pour flotter a côté des précédents, il ira tout simplement à la ligne.

6. Un élément flottant à gauche n’est pas censé s’aligner verticalement avec un élément flottant à droite juste après lui. Et vice-versa. Si certains navigateurs ont l’air de donner l’illusion que si, il ne faut pas s’y fier. Il y aura toujours des surprises car ce n’est absolument pas une règle ; dans certains navigateurs, un élément flottant annule le flottement d’un élément précédent flottant dans le sens opposé et va donc à la ligne juste après.
7. Un élément inline n’est pas comparable à un élément block. Les éléments inline sont des éléments de contenu et non conteneurs : ils flottent donc à côté d’un élément flottant (exemple : em, i, span).
8. Un élément flottant redéfinit son propre flux à l’intérieur de son bloc. Ce qui signifie que toute propriété float ou clear (ou autre propriété de positionnement) sur des blocs contenus eux-mêmes dans un élément conteneur flottant auront une portée limitée à ce conteneur.

Ressources
Pour finir, voici les sources dans lesquelles j’ai puisé l’essentiel de cet article. Il ne faut pas hésiter à les consulter, elles sont très complètes.
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://articles.techrepublic.com.com/5100-10878_11-6146768.html
http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml