Descripción extensa de cómo el flotante se superpone con las cajas en el flujo normal

Este diagrama ilustra una imagen flotante que se superpone con los bordes de un párrafo en el flujo normal: los bordes del párrafo son cortados por las partes no transparentes de la imagen. El segundo párrafo es empujado abajo del flotante por la propiedad 'clear'.

Hay dos párrafos en el flujo normal, cada uno rodeado por bordes rojos. Una imagen flotante a la izquierda provoca que las tres líneas finales del párrafo superior fluyan por su lado derecho. Los bordes del párrafo se ven a través del área de margen de la caja de la imagen. Las partes no transparentes del área del contenido de la imagen los cortan, sin embargo.

El segundo párrafo fluye normalmente, comenzando debajo del margen inferior de la imagen. El margen superior del segundo párrafo es estirado hasta alcanzar el margen inferior del párrafo precedente.

Volver a la imagen.