Description longue d'un exemple de positionnement flottant avec clear

Ce dessin montre les effets du positionnement flottant d'une boîte, noté "Interne", et comment ses "pairs" sont repoussés en-dessous d'elle par la propriété 'clear'.

Il y a une fenêtre de document dont les 8 lignes, numérotées de 1 à 8, ont une hauteur de 24px. Le texte avant la boîte de "Interne" se range dans la ligne 1 et à moitié dans la ligne 2. La boîte de "Interne" flotte à droite et occupe la deuxième moitié des lignes 2 et 3. La boîte de "Interne2" se range dans la ligne suivante (la ligne 4) avec le reste du texte.

En utilisant une transcription avec un élément PRE, chacune des lignes de hauteur 24px est simulée avec deux lignes, la seconde commençant ave un numéro approprié. Des barres verticales représentent le bord gauche de la boîte flottante. Voici les lignes de texte telles qu'elles apparaissent dans l'image :


1 Début du corps du contenu. Début du 

2 contenu d'Externe.      | Contenu

3                         | d'Interne.

4 Contenu d'Interne2. Fin du contenu

5 d'Externe. Fin du corps du contenu.

Par défaut, la couleur du texte est noire. L'expression "Début du contenu d'Externe" est en rouge. L'expression "Contenu d'Interne2" est en rouge. L'expression "Contenu d'Interne" est en bleu. L'expression "Fin du contenu d'Externe" est en rouge.

Retour vers l'image.