Elementos flotantes — CSS: Posicionamiento de elementos

• ¿Qué es el flujo flotante?
• La propiedad float
• float y su uso en el diseño web
• ¿Cómo limpiar los elementos flotantes? (clear)
  • Valores de clear:

En esta lección, vamos a hablar sobre el flujo flotante en CSS. Si alguna vez has visto una imagen rodeada de texto en una revista o un sitio web, estás viendo un ejemplo real de flujo flotante. Su propósito principal es permitir que el texto fluya alrededor de los elementos flotantes, algo que puedes lograr con la propiedad float.

¿Qué es el flujo flotante?

Esto es muy útil, por ejemplo, para insertar imágenes dentro de un párrafo sin interrumpir la lectura.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

La propiedad float

Para cambiar el flujo de un elemento a flotante, CSS nos da la propiedad float, que tiene dos valores principales:

• left: el elemento flota a la izquierda y el contenido fluye a su derecha.
• right: el elemento flota a la derecha y el contenido fluye a su izquierda.

Prueba modificar la línea de CSS en el ejemplo anterior de float: left; a float: right; y observa cómo cambia la posición de la imagen y el texto.

img {
  float: left; /* Cambia a right para ver la diferencia */
  margin-right: 10px; /* Ajusta el margen para evitar colisiones con el texto */
}

Cuando flotas un elemento, este se extrae del flujo normal, pero el texto se ajusta automáticamente para no superponerse. Un truco para visualizar este comportamiento es modificar la opacidad (opacity) del elemento flotante:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

float y su uso en el diseño web

Antes de la llegada de flexbox y grid, float era una técnica común para crear diseños de múltiples columnas. Sin embargo, ya no se recomienda usar float para estructurar páginas web, sino solo para su propósito original: organizar texto e imágenes.

Otra característica importante de float es que convierte automáticamente los elementos en bloques. Esto significa que funciona incluso en elementos en línea como span sin necesidad de cambiar su display.

Ejemplo:

span {
  float: left;
  width: 100px;
  height: 50px;
  background: lightblue;
}

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

¿Cómo limpiar los elementos flotantes? (clear)

Cuando usas float, puede ocurrir un problema: los elementos siguientes pueden verse afectados por los elementos flotantes. Para evitar estos problemas, existe la propiedad clear, que nos ayuda a "limpiar" el flujo.

Valores de clear:

• left: impide que los elementos floten a la izquierda del elemento al que se aplica.
• right: impide que los elementos floten a la derecha.
• both: impide flotaciones en ambos lados.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Si queremos evitar que el contenido principal se superponga con los elementos flotantes, agregamos clear: left; en el <main>:

main {
  clear: left;
}

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Si intentamos clear: right; en este caso, no habrá ningún cambio visible porque el contenido afectado todavía está dentro del bloque flotante.

Para corregir esto, aplicamos clear: right; al párrafo específico:

<p class="clear-right">Texto flotante con la corrección aplicada.</p>

.clear-right {
  clear: right;
}

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Con estos conocimientos, ahora puedes organizar imágenes dentro del texto de manera fluida y sin problemas de alineación.