EasyCode365EasyCode365

Elementos flotantes y clearfix

Los floats son una característica antigua de CSS, pero todavía vale la pena aprenderlos.

Hoy, normalmente deberías usar Flexbox o Grid para layouts completos de página. Los floats siguen siendo útiles para una tarea clásica: colocar una imagen o una caja pequeña junto al texto para que el texto la rodee.

En esta lección, aprenderás cómo funcionan los floats, por qué pueden romper contenedores padre y cómo clear y los clearfixes solucionan problemas comunes con floats.

Por qué existen los floats

Los floats se crearon para diseños con estilo de revista.

La idea original era simple: colocar una imagen a la izquierda o derecha de un artículo y dejar que el texto del párrafo la rodeara.

Antes de que existieran Flexbox y Grid, los desarrolladores también usaban floats para crear columnas y layouts de página. Funcionaba, pero a menudo causaba problemas de layout.

Qué hace float

La propiedad float mueve un elemento hacia el lado izquierdo o derecho de su contenedor.

El contenido que viene después del elemento flotante puede subir y rodearlo.

Valores comunes:

  • float: left
  • float: right
  • float: none

Los elementos flotantes se eliminan del flujo normal de bloques, pero el texto y el contenido inline todavía pueden rodearlos. Ese es el comportamiento especial que hace útiles a los floats.

Flotar a la izquierda y a la derecha

Usa float: left para empujar un elemento hacia la izquierda.

Usa float: right para empujar un elemento hacia la derecha.

Solo lectura

Cuando un elemento flota a la izquierda, el texto cercano puede rodearlo por su lado derecho. Cuando un elemento flota a la derecha, el texto cercano puede rodearlo por su lado izquierdo.

Cómo el texto rodea elementos flotantes

Este es el caso de uso más fácil para principiantes.

La caja de imagen flota a la izquierda y el texto del párrafo la rodea.

Se puede editar
<article class="article">
  <div class="article-image">Imagen</div>
  <p>
    Este texto viene después de la imagen flotante. Como la imagen flota a la izquierda, el párrafo
    sube y rodea su lado derecho. Este es el caso de uso clásico de los CSS floats. Añade más texto,
    y podrás ver que el texto continúa junto a la imagen hasta que ya no queda espacio vertical a su
    lado. Después de pasar la parte inferior de la imagen flotante, vuelve a la línea normal de
    ancho completo.
  </p>
</article>

<style>
  .article {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .article-image {
    float: left;
    width: 110px;
    height: 90px;
    margin-right: 16px;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
  }
</style>

margin-right crea espacio entre la caja flotante y el texto.

Colapso de altura del padre

Los floats pueden crear un problema confuso.

Si un padre contiene solo hijos flotantes, puede que el padre no crezca lo suficiente para envolverlos. Esto se llama colapso de altura del padre.

Se puede editar
<div class="broken-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">Este texto sube porque el padre no envolvió el float.</p>

<style>
  .broken-parent {
    border: 3px solid #dc2626;
    background-color: #fee2e2;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #fecaca;
    border: 2px solid #991b1b;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

El borde rojo del padre no envuelve al hijo flotante. Esto ocurre porque el hijo flotante ya no cuenta como un bloque normal para la altura del padre.

Qué hace clear

La propiedad clear le dice a un elemento que no debe colocarse junto a un elemento flotante.

En su lugar, el elemento con clear se mueve debajo del float.

Se puede editar
<div class="side-note">Float</div>

<p class="wrap-text">Este párrafo rodea la caja flotante.</p>

<p class="cleared-text">Este párrafo tiene clear, así que empieza debajo de la caja flotante.</p>

<style>
  .side-note {
    float: left;
    width: 110px;
    padding: 18px;
    margin-right: 12px;
    background-color: #fef3c7;
    border: 2px solid #d97706;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .wrap-text,
  .cleared-text {
    font-family: Arial, sans-serif;
  }

  .cleared-text {
    clear: both;
    padding-top: 8px;
  }
</style>

Usa clear cuando el siguiente elemento debe empezar debajo del contenido flotante.

Limpiar izquierda, derecha y ambos lados

La propiedad clear tiene tres valores comunes:

  • clear: left se mueve debajo de elementos flotados a la izquierda.
  • clear: right se mueve debajo de elementos flotados a la derecha.
  • clear: both se mueve debajo de floats de izquierda y derecha.

Para principiantes, clear: both suele ser la opción más segura.

Hacer que el padre contenga sus floats

Cuando un padre contiene solo hijos flotantes, necesitas una forma de hacer que los envuelva y arreglar el problema de colapso de altura.

Hay dos soluciones comunes, y ambas se aplican al padre, no al hijo flotante:

  • display: flow-root: el enfoque moderno de una sola línea.
  • Un clearfix: una técnica más antigua que usa el pseudo-elemento ::after.

Las siguientes dos secciones muestran cada una.

Técnica moderna: display: flow-root

La forma moderna más limpia de hacer que un padre envuelva sus hijos flotantes es una sola línea: display: flow-root en el padre.

Crea un nuevo block formatting context, que contiene los floats. No hay pseudo-elemento ni reglas extra que recordar.

Se puede editar
<div class="fixed-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">Ahora el padre envuelve el float, así que este texto empieza debajo.</p>

<style>
  .fixed-parent {
    display: flow-root;
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

display: flow-root es compatible con todos los navegadores modernos, así que es la opción recomendada para proyectos nuevos.

El clearfix clásico

Todavía verás una técnica más antigua en muchos codebases existentes. Un clearfix usa el pseudo-elemento ::after para crear un elemento invisible después de los hijos flotantes y limpiar los floats.

Se puede editar
<div class="fixed-parent clearfix">
  <div class="float-box">Float</div>
</div>

<p class="after-text">El clearfix también hace que el padre envuelva el float.</p>

<style>
  .fixed-parent {
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

Es útil reconocer este patrón, pero para código nuevo display: flow-root es más simple.

Cuándo los floats siguen siendo útiles hoy

Los floats siguen siendo útiles cuando quieres que el texto rodee algo.

Buenos ejemplos:

  • una imagen dentro de un artículo
  • una pequeña foto de autor junto al texto de biografía
  • una cita destacada dentro de un párrafo largo

Para este tipo de envoltura de texto, los floats todavía tienen sentido.

Cuándo no usar floats

No uses floats para construir un layout moderno de página completa.

Evita floats para:

  • columnas de página
  • headers y sidebars
  • grids de tarjetas
  • layouts de aplicaciones

Usa Flexbox o Grid para esos layouts. Son más fáciles de controlar y funcionan mejor en pantallas responsivas.

Errores comunes de principiantes

  • Usar floats para layouts modernos de página: usa Flexbox o Grid para layouts estructurales.
  • Olvidar limpiar la siguiente sección: el texto o los footers pueden rodear un float cuando querías que estuvieran debajo.
  • Poner clearfix en el hijo flotante: clearfix pertenece al contenedor padre.
  • Olvidar el colapso de altura del padre: un padre con solo hijos flotantes puede parecer vacío.
  • Flotar sin espaciado: añade margins para que el texto no toque el elemento flotante.

Mini tarea práctica

Mira esta regla CSS:

Solo lectura

¿Qué hace esta regla con el footer?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Cuál es el caso de uso clásico de los floats?
  2. ¿Qué propiedad CSS fuerza a un elemento a moverse debajo del contenido flotante?
  3. ¿Dónde debe aplicarse una clase clearfix: en el hijo flotante o en el padre?

Respuestas:

  1. Hacer que el texto rodee una imagen o un elemento pequeño.
  2. clear.
  3. En el padre.

Respuesta de la mini tarea práctica: fuerza al footer a moverse debajo de floats izquierdos y derechos en lugar de colocarse junto a ellos.

Pequeño desafío

Da estilo al layout de artículo de abajo.

Tus objetivos:

  • Haz flotar .profile-pic hacia la derecha.
  • Añade un margin izquierdo para que el texto no toque la caja flotante.
  • Usa clear en .next-section para que empiece debajo del float.
Se puede editar
<article class="bio">
  <div class="profile-pic">Foto</div>
  <p>
    Esta biografía corta debería rodear la foto. La foto debería estar en el lado derecho del texto.
  </p>
</article>

<section class="next-section">
  <h3>Siguiente sección</h3>
  <p>Esta sección debería empezar debajo de la foto flotante.</p>
</section>

<style>
  .bio,
  .next-section {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .profile-pic {
    width: 100px;
    height: 90px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
    /* Haz flotar esta caja hacia la derecha */

    /* Añade margin izquierdo */
  }

  .next-section {
    /* Mueve esta sección debajo del float */

    margin-top: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
  }
</style>

Resumen

  • float: left y float: right mueven elementos hacia los lados.
  • El texto y el contenido inline pueden rodear elementos flotantes.
  • Históricamente, los floats se usaban para layout, pero hoy son mejores para envolver texto.
  • Los elementos flotantes pueden causar colapso de altura del padre.
  • clear evita que un elemento se coloque junto a contenido flotante.
  • clear: both mueve un elemento debajo de floats izquierdos y derechos.
  • display: flow-root en el padre es la forma moderna de hacer que envuelva sus hijos flotantes.
  • Un clearfix con ::after es la técnica antigua para el mismo trabajo.
  • Usa Flexbox o Grid para layouts modernos de página en lugar de floats.