Descrizione lunga dell'esempio di flottante e di flusso del testo

Questo diagramma illustra come il testo fluisce intorno ad un flottante, ed in particolare come i riquadrati di riga di contenuto lungo il flottante vengano accorciati per far spazio al riquadrato flottante (inclusi i margini). Il sorgente HTML dell'esempio precede l'immagine. Nel documento sorgente, un elemento BODY contiene un elemento P che contiene un'IMG flottata a sinistra.

La parte superiore dell'illustrazione riporta "max (BODY margin, P margin)" per indicare che i margini verticali collassano. Tuttavia, il margine di IMG non è coinvolto in questo calcolo, poichè l'IMG è flottata.

Nella parte sinistra dell'illustrazione, i margini sinistri di BODY, P, e IMG non collassano (i margini orizzontali non collassano).

Il testo del paragrafo fluisce lungo il lato destro di IMG, partendo dalla parte superiore e fino alla destra del suo margine destro. Quando il testo raggiunge la parte inferiore del margine inferiore dell'IMG, esso continua come avrebbe normalmente fatto all'interno di un elemento P. Così, i riquadrati di riga lungo un flottante vengono accorciati.

Ritorna all'immagine.