Éléments flottants qui dépassent de l'élément parent (3)

1. Exposé du problème
2. Exemples avec un élément parent de largeur fixe, et exposé des solutions disponibles
3. Exemples avec un élément parent sans largeur fixe (non doté du layout)
4. Pour IE Win : divers moyens de doter l'élément parent du layout

Modifications des paramètres de test

Contrairement à ce que nous avions avec les exemples précédents, on supprimer maintenant la largeur fixe de l'élément parent (bloc conteneur). Cela revient à supprimer la ligne suivante dans notre feuille de style CSS :

width: 500px;

Pour les explications sur chaque propriété utilisée, la page précédente.

Résultats

Sans propriété CSS spécifique destinée à faire rentrer les flottants dans la hauteur de l'élément parent :

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Avec un élément doté de clear: both; :

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Ceci est une div dotté de la propriété CSS clear: both; qui permet de "faire rentrer" les éléments flottants qui le précèdent dans le flux de l'élément parent.

Avec un bloc parent doté de overflow: auto; :

Ce bloc parent est doté de la propriété CSS overflow: auto;

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Avec un bloc parent flottant :

Ce bloc parent est doté de la propriété CSS float: left;

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Pour comparaison, la même chose mais avec les deux éléments enfants flottants à gauche :

Ce bloc parent est doté de la propriété CSS float: left;

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à gauche.

Avec un bloc parent doté de display: table; :

Ce bloc parent est doté de la propriété CSS display: table;

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Note : l'image est bien flottante à droite, mais dans les navigateurs appliquant la propriété display: table;, le bloc parent ne s'étend pas à toute la largeur disponible. Comme un tableau normal, il ne prendra que la largeur dont il a besoin pour afficher son contenu.