Voici des exemples d'éléments flottant dans un conteneur. Ce sont les petites boites jaunes-vertes. Les conteneurs sont les boites grises avec une bordure en gris sombre.
Les éléments flottants sont sortis du flux normal, ainsi leurs conteneurs ne peuvent pas déterminer (avoir d'influence sur) la hauteur de leurs conteneurs. Les conteneurs gris s'étireront pour s'adapter au contenu qu'ils contiennent - mais uniquement pour le contenu qui est dans le flux normal. Les conteneurs ignoreront la hauteur des éléments flottants.
Si le contenu du conteneur est assez long, le flottant peut sembler être placé correctement dans le conteneur.
Si le contenu du conteneur est très court, le flottant risque de dépasser le bas du conteneur.
Si un conteneur n'a pas de contenu, il n'a pas de hauteur et le de couleur de fond ne devrait pas être affcihé du tout. Si il n'y a qu'un seul élément flottant dans le dedans, alors seul cet élément sera affiché. Comme vous le voyez, le conteneur ne sera pas affiché autour de l'élément flottant.
Vous pouvre forcer le conteneur à arrêter le flottement des éléments qu'il contient. Le conteneur suivant a un contenu court, mais il y a aussi un élément "stoppeur" pour pousser le conteneur sous l'élément flottant. Dans ce cas, un élément <div> est utilisé stylé avec clear: both.
Vous pouvez faire flotter le conteneur parent tout comme l'élément flottant qu'il contient. Le conteneur parent entourera ainsi l'élément flottant.
overflow: auto
Vous pouvez attribuer au conteneur parent la déclaration overflow: auto. Elle permet au conteneur parent de se répandre pour s'adapter au contenu flottant qu'il contient.