Descripción extensa del ejemplo de flotante y flujo de texto

Este diagrama ilustra cómo el texto fluye alrededor de un flotante y, en particular, cómo las cajas de línea del contenido que se encuentra al lado del flotante son cortadas para dar cabida a la caja flotante (incluyendo los márgenes). La fuente HTML del ejemplo precede a la imagen. En el documento fuente, un elemento BODY contiene un P que contiene un IMG que flota a la izquierda.

En lo alto de la ilustración se lee "max (BODY margin, P margin)" para indicar que los márgenes verticales se cierran. Sin embargo, el margen de IMG no está incluido en el cálculo debido a que IMG es flotante.

Al costado izquierdo de la ilustración, los márgenes izquierdos de BODY, P e IMG no se cierran (los márgenes horizontales no se cierran).

El texto del párrafo fluye a lo largo del costado derecho de IMG, comenzando en la parte superior y a la derecha de su margen derecho. Cuando el texto alcanza la base del margen inferior de IMG, continúa como normalmente lo haría dentro de un elemento P. De este modo, las cajas de línea a lo largo de un flotante son acortadas.

Volver a la imagen.