Descrizione lunga di un esempio che illustra il float senza clear

Questo diagramma illustra gli effetti del far flottare un riquadrato ("inner") e come il suo "fratello" fluisca lungo di lui.

Viene mostrata una finestra di un documento, con 8 righe (numerate da 1 a 8), ciascuna alta 24px. Poichè il riquadrato "inner" è stato flottato a destra, tutto il restante testo gli fluisce intorno, incluso quello del riquadrato "sibling" (sulle righe da 1 a 5).

Nel seguente elemento PRE, ogni riga da 24 pixel è simulata da due righe, la seconda che comincia col numero appropriato. Le barre verticali rappresentano il limite sinistro del riquadrato flottato. Le righe, come appaiono nell'immagine, contengono:


1 Beginning of body contents. Start 

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body
 
5 contents.

Il colore predefinito del testo è nero. "Start of outer contents" è rosso. "Sibling contents" è rosso. "Inner contents" è blu. "End of outer contents" è rosso.

Ritorna all'immagine.