Tema 12 · Overflow y Float

Desbordamiento (overflow) y Flotación

Aprende a controlar el contenido que excede el tamaño de su contenedor con overflow (hidden, auto, scroll) y comprende el uso histórico de float y técnicas de limpieza (clear, clearfix).

Eje Z, Capas y Contexto de Apilamiento Flexbox: Contenedor, Ejes y flex-direction

Control de Desbordamiento: La Propiedad overflow

Cuando el contenido interno de un elemento excede la anchura o altura declarada para su caja contenedora, la propiedad overflow decide si recortar, mostrar o proporcionar barras de desplazamiento.

Valor Comportamiento Visual Uso Recomendado
visible El contenido sobresale de la caja sin recortarse (valor por defecto). Herramientas de inspección o menús desplegables que deben salir del contenedor.
hidden Corta el contenido sobrante de forma limpia e invisible. Bordes redondeados en contenedores con imágenes (overflow: hidden) o recortes tipográficos.
scroll Fuerza la aparición continua de barras de desplazamiento horizontal y vertical. Poco usado porque muestra barras inactivas si el contenido cabe.
auto El estándar inteligente. Muestra barra de scroll solo si el contenido desborda la caja. Cajas de comentarios, paneles de código, tablas anchas y chats.

Consejo: Puedes controlar los ejes por separado con overflow-x (horizontal) y overflow-y (vertical).

Flotación Clásica (float) y Limpieza (clear)

Originalmente concebida para el diseño editorial, float: left o float: right extrae un elemento del flujo para que el texto circundante lo envuelva como en un periódico o revista:

  • Colapso del contenedor: Si un padre solo contiene hijos flotantes, su altura colapsa a 0px porque los elementos flotantes no empujan el fondo.
  • Solución moderna de limpieza: Aplica display: flow-root; al contenedor padre para crear un nuevo contexto de formato de bloque que encierra automáticamente los elementos flotantes.

⚡ Panel con Scroll Automático y Texto que Envuelve Imagen

Observa cómo overflow: auto genera un scroll vertical limpio en el panel de términos y float: left permite que el texto envuelva la insignia:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Overflow y Float en CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      margin: 0;
      padding: 25px;
      color: #0f172a;
    }

    /* Caja con altura fija y scroll inteligente */
    .caja-scroll {
      height: 140px;
      overflow-y: auto; /* Muestra scroll solo si el texto desborda */
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 16px;
      max-width: 500px;
      margin-bottom: 25px;
      font-size: 0.9rem;
      line-height: 1.6;
      color: #334155;
    }

    /* Contenedor con limpieza moderna de flotación */
    .contenedor-articulo {
      display: flow-root; /* Evita el colapso del contenedor con floats */
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 20px;
      max-width: 500px;
    }

    /* Elemento flotado a la izquierda */
    .insignia-flotada {
      float: left;
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #0284c7, #2563eb);
      color: white;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.8rem;
      margin-right: 16px;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>

  <h3>1. Panel con Desbordamiento Controlado (overflow-y: auto)</h3>
  <div class="caja-scroll">
    <p style="margin-top:0;"><strong>Términos del Servicio de Kilopolis:</strong></p>
    <p>1. Kilopolis Academia proporciona entornos de prueba interactivos en tiempo real para estudiantes y profesionales del desarrollo de software.</p>
    <p>2. Todos los ejemplos de código generados en los manuales son de libre experimentación con propósitos educativos y de capacitación técnica.</p>
    <p>3. Desplázate hacia abajo para confirmar que el scroll se activa suavemente respetando los límites de altura de la caja.</p>
  </div>

  <h3>2. Envoltura de Texto Clásica con float: left</h3>
  <div class="contenedor-articulo">
    <div class="insignia-flotada">CSS</div>
    <p style="margin: 0; line-height: 1.5; color: #475569; font-size: 0.95rem;">
      La propiedad <code>float: left</code> permite que este texto fluya ordenadamente alrededor del cuadrado azul. Gracias a <code>display: flow-root</code> en el contenedor, los bordes exteriores no colapsan.
    </p>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.