Para hacer que el texto de un párrafo fluya alrededor de una imagen que sobresale del borde de una tarjeta, aplica float a la imagen y usa un margen exterior negativo. Añade shape-outside para crear un contorno curvo. Este tutorial crea un ejemplo local completo que puedes abrir en Safari en tu Mac.

¿Qué hace que el texto fluya alrededor de una imagen que sobresale?

La imagen debe participar en la maquetación del párrafo mediante float. CSS float coloca un elemento junto a uno de los lados de su contenedor y permite que el texto adyacente fluya a su alrededor. En este ejemplo, float: right hace que el texto fluya a su izquierda y luego por debajo. MDN: float.

Tres opciones controlan el resultado: float crea el comportamiento de ajuste del texto, un margen derecho negativo permite que la imagen sobresalga del contenedor y shape-outside define el contorno que sigue el texto cercano. Los float normales hacen que el texto fluya alrededor de una forma rectangular; una forma puede hacer que cada línea siga un círculo. MDN: shape-outside.

Mover una imagen visualmente no es suficiente. Una imagen con posición absoluta no ocupa espacio en el flujo normal, así que los elementos circundantes se comportan como si no estuviera. Una transformación cambia la posición renderizada sin reorganizar el flujo normal del documento. Esto explica por qué una imagen que sobresale puede cubrir el texto si se posiciona con position: absolute o transform: translateX(...). MDN: position, MDN: Using CSS transforms.

La tarea es deliberadamente específica: una imagen circular cruza el borde derecho de una tarjeta de texto y los párrafos de la tarjeta siguen el contorno izquierdo del círculo. La imagen y los párrafos pertenecen a la misma región de ajuste del texto.

Crea un ejemplo completo en tu Mac

En un editor de código de texto sin formato, crea un archivo llamado overlap-wrap.html. Pega el documento completo que aparece a continuación, guárdalo y ábrelo en Safari. El ejemplo incluye su propia imagen SVG abstracta como URL de datos, así que no hay que instalar archivos de imagen, paquetes ni herramientas de compilación.

La imagen con float aparece antes de los párrafos a los que debe afectar. Esta ubicación importa porque la posición de un elemento flotante está restringida por el contenido que aparece antes en el documento. Si mantienes el encabezado antes de la imagen flotante, el encabezado podrá ocupar todo el ancho del texto de la tarjeta. W3C: Visual formatting model.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

Con una ventana gráfica de más de 760px de ancho, el resultado previsto es un gráfico circular que sobresale hacia el espacio exterior, mientras las líneas de los párrafos siguen su lado izquierdo. Con 760px de ancho o menos, la imagen se convierte en un bloque centrado sobre los párrafos. El punto de interrupción es una decisión de diseño ilustrativa; @media aplica las declaraciones incluidas cuando se cumple la condición de la consulta. MDN: @media.

El gráfico de ejemplo es decorativo, así que el elemento de imagen usa alt="". Si lo sustituyes por un gráfico que transmite información, proporciona un texto alternativo adecuado. WHATWG distingue las imágenes decorativas de aquellas cuya información necesita una alternativa equivalente en texto. WHATWG: Requirements for providing text to act as an alternative for images.

¿Cómo se eligen el espacio que sobresale y la separación del texto?

Empieza por la posición de la imagen y luego ajusta el contorno. Una imagen con float: right se coloca usando su caja de margen. En este ejemplo, el margen derecho negativo sitúa el borde derecho de la imagen 88px más allá del borde del contenido de la tarjeta. La tarjeta tiene 24px de relleno a la derecha, por lo que la imagen sobresale 64px de su fondo blanco. Son dimensiones calculadas para este ejemplo y medidas en píxeles CSS. W3C: Positioning the float.

Cantidad Valor del ejemplo Cálculo o finalidad
Ancho de la imagen 240px Diámetro del círculo mostrado
Desplazamiento hacia fuera desde el borde del contenido 88px Valor absoluto del margen derecho negativo
Relleno de la tarjeta 24px Espacio entre el borde del contenido y el borde del fondo
Parte visible que sobresale del fondo 64px 88 − 24
Ancho de la imagen que queda dentro del área de contenido 152px 240 − 88
Espacio reservado como alternativa rectangular 168px 240 − 88 + 16, incluido el margen izquierdo

Para tu propia maquetación, calcula el valor absoluto del margen negativo sumando el espacio que quieres que sobresalga y el relleno derecho del contenedor. Por ejemplo, para que sobresalga 40px con 24px de relleno, usa un margen derecho de -64px. Comprueba de nuevo el ancho restante para el texto cada vez que amplíes la imagen o reduzcas el ancho del contenedor.

La versión circular usa shape-outside: circle(50%) border-box para que su geometría siga la caja cuadrada de la imagen. Elegir explícitamente border-box resulta útil aquí porque los márgenes asimétricos cambian la caja de margen. Si no se especifica una caja de referencia, una forma básica usa margin-box de forma predeterminada. MDN: Basic shapes with shape-outside.

shape-margin: 16px añade espacio alrededor del contorno de ajuste. El margen izquierdo positivo deja sitio para esa separación en el lado que da al texto. Las formas, incluidos sus márgenes, quedan recortadas por la caja de margen del elemento flotante; aumentar únicamente shape-margin no permite extender indefinidamente el área de ajuste. El margen derecho negativo también recorta la forma por el lado exterior, donde este ejemplo no tiene texto de párrafo. W3C: CSS Shapes Module Level 1.

Para una imagen rectangular, cambia border-radius por 0, shape-outside por none y shape-margin por 0. Conserva float y los márgenes. Así, el texto fluirá alrededor de la imagen con lados rectos y la misma posición exterior. Si quitas solo la forma, el recorte circular permanece, pero el texto tendrá un espacio rectangular alrededor de la imagen.

¿Qué límites del contenedor afectan al ajuste del texto?

La tarjeta usa display: flow-root para establecer un contexto de formato de bloque que contiene verticalmente el elemento flotante. Así, la altura de la tarjeta tiene en cuenta la imagen aunque el texto sea breve. También mantiene esta región de ajuste independiente de los elementos flotantes externos. MDN: Block formatting context.

Mantén los párrafos en el flujo de bloques normal dentro de esa región. Si la imagen es un elemento flex o grid directo, su propiedad float no generará esta disposición del texto alrededor de los párrafos. Del mismo modo, si el contenedor independiente de un párrafo tiene su propio contexto de formato de bloque, el elemento flotante externo queda excluido de su contenido. Una cuadrícula externa puede colocar toda la tarjeta; el interior de la tarjeta puede seguir usando el flujo normal. MDN: Block formatting context.

Comprueba el recorte por separado. El ejemplo deja visible el desbordamiento para que se pueda dibujar la parte que sobresale. Usar overflow para contener elementos flotantes puede introducir recortes o barras de desplazamiento; flow-root permite contenerlos sin tener que recurrir a esa opción. Inspecciona también los componentes que envuelven la tarjeta si la imagen desaparece justo en el borde de un antecesor. MDN: Containing internal floats.

CSS Shapes también tiene un límite direccional: un elemento flotante a la derecha permite que el texto fluya a su izquierda, y uno flotante a la izquierda permite que fluya a su derecha. Un único elemento flotante no puede crear pasos de texto a ambos lados de una imagen centrada. Para esta tarea, se admite la disposición con la imagen flotante junto a un borde. W3C: CSS Shapes and float behavior.

¿Se puede usar este método con Tailwind CSS?

Sí. En un proyecto de Tailwind existente, float-right genera float: right, mientras que float-none elimina el elemento del flujo flotante. Tailwind proporciona estas utilidades; el navegador sigue encargándose de la disposición del texto. Tailwind CSS: float.

Para la declaración del contorno, la sintaxis de propiedades arbitrarias de Tailwind puede expresar [shape-outside:circle(50%)_border-box] y [shape-margin:16px]. El guion bajo representa el espacio antes de border-box. Estos son fragmentos de nombres de clase para un proyecto de Tailwind ya configurado, no un reemplazo del documento completo anterior. Conserva las mismas dimensiones, márgenes, disposición del contenedor y restablecimiento para ventanas estrechas al adaptarlo. Tailwind CSS: Adding custom styles.

¿Cómo se diagnostica un ajuste del texto que no se ve bien?

Usa el ejemplo local como referencia inicial y luego incorpora tus estilos actuales de uno en uno. Esta secuencia comprueba las condiciones que determinan la disposición:

  1. Comprueba primero el ajuste rectangular. Cambia temporalmente shape-outside a none. Si el texto sigue debajo de la imagen, comprueba si la imagen tiene float, posición absoluta o si es un elemento flex/grid directo.
  2. Comprueba el orden del documento. Coloca el elemento flotante antes de los párrafos que deben ajustarse a su alrededor.
  3. Comprueba la región de ajuste. Mantén el elemento flotante y el contenido de los párrafos dentro del mismo contexto de formato de bloque; elimina el contexto independiente del contenedor del párrafo si no hace falta.
  4. Comprueba el contorno. Restablece el círculo y su referencia explícita a border-box. Confirma que la imagen mostrada sea cuadrada antes de aplicar un recorte circular.
  5. Comprueba el espacio exterior. Aumenta el ancho de la ventana gráfica y busca recortes en la tarjeta o en sus antecesores. Confirma que la página reserve espacio exterior suficiente para la parte que sobresale.
  6. Comprueba la disposición estrecha. Cambia el tamaño de la ventana y cruza el punto de interrupción del ejemplo; verifica que tanto float como el margen negativo se restablezcan.

Estas comprobaciones siguen las reglas documentadas para la colocación de elementos flotantes, los contextos de formato y las cajas de referencia de formas. Evita añadir saltos de línea manuales para corregir líneas individuales; harían que el texto dependiera de un tamaño concreto de ventana.

MDN indica que shape-outside tiene amplia disponibilidad, aunque señala que la compatibilidad puede variar en algunas partes de su sintaxis. Este ejemplo usa la forma documentada circle(). Compara la página en los navegadores de Mac que quieras admitir y evalúa el espacio libre y la legibilidad en lugar de exigir finales de línea idénticos. Si la declaración de forma no está disponible, el elemento flotante conserva el ajuste rectangular. MDN: shape-outside.

Para terminar la disposición, elige conjuntamente el tamaño de la imagen y cuánto sobresale, conserva suficiente ancho para el texto y mantén la alternativa apilada. Una vez que funcionen esas dimensiones, usa el contorno para ajustar el espacio alrededor de la imagen. Así, el párrafo podrá redistribuirse cuando cambie el texto o el ancho disponible.

Fuentes