Descrizione lunga di esempio che mostra il float col clear

Questo diagramma illustra gli effetti del far flottare un riquadrato ("inner") e di come il suo "fratello" sia spinto sotto di lui a causa della proprietà 'clear'.

Viene mostrata la finestra di un documento, con 8 righe (numerate da 1 a 8), ciascuna alta 24px. Il testo prima del riquadrato "inner" fluisce sulla riga 1 ed a metà della riga 2. Il riquadrato "inner" è stato flottato a destra ed occupa la seconda metà delle righe 3 e 4. Il riquadrato fratello fluisce sulla riga seguente (riga 4) ed è seguito dal resto del testo.

Nel seguente elemento PRE, ogni riga da 24 pixel viene simulata da due righe, la seconda che comincia con il 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                        | contents.

4 Sibling contents. End of outer 

5 contents. End of body 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.