Flujo normal

El flujo normal es el sistema de disposición de elementos que el navegador aplica por defecto cuando el autor no indica otra cosa. No es una función opcional ni un modo que se activa: es el punto de partida de toda página web. Cuando escribís HTML puro sin agregar position, ni Flexbox, ni Grid, lo que ves en la pantalla es el flujo normal en acción. Cada elemento ocupa su lugar según reglas simples y predecibles: los bloques se apilan verticalmente, los elementos inline fluyen horizontalmente junto con el texto.

El flujo normal existe porque CSS nació como un lenguaje para formatear documentos — artículos, manuales, páginas de texto. Para ese propósito, las reglas del flujo son perfectas: las secciones se apilan una debajo de la otra, los párrafos se suceden, los énfasis fluyen dentro de las líneas. No hace falta declarar nada: el navegador sabe cómo disponer el contenido por defecto. Esta capacidad de hacer “algo razonable” sin instrucciones explícitas es lo que hace a CSS especialmente accesible para principiantes y lo que diferencia la web de otros sistemas de layout.

Entender el flujo normal es entender el modo 0 de CSS — el estado de reposo desde el que parten todas las decisiones de layout. Positioning, Flexbox y Grid no reemplazan el flujo normal: lo modifican para los elementos que lo necesitan. El resto sigue en flujo normal. Por eso, saber cuándo algo está en flujo normal y cuándo fue sacado de él es la base para depurar cualquier problema de maquetación.

Cómo funciona

Modo bloque — apilamiento vertical

Cuando un elemento tiene display: block (o un valor equivalente como list-item), el navegador lo trata como un bloque de formato de bloque. El bloque ocupa todo el ancho disponible de su contenedor, genera un salto de línea implícito antes y después de él, y el elemento siguiente comienza en una nueva línea, directamente debajo.

Este apilamiento vertical es determinístico y estricto: no importa si un bloque tiene solo 50px de ancho y le “sobran” 500px al costado. En flujo normal, un bloque siempre ocupa su propia línea. No hay ninguna propiedad de bloque que permita colocar otro bloque a su derecha — para eso se necesita Flexbox, Grid, o positioning.

Los bloques se suceden en el orden exacto del HTML. El primer elemento en el markup es el primero en la pantalla. Esta correspondencia directa entre orden del código y orden visual es lo que hace al flujo normal predecible y accesible: el lector de pantalla sigue el mismo orden que el ojo.

Modo inline — flujo horizontal

Cuando un elemento tiene display: inline, el navegador lo inserta en la línea de texto de su contenedor. Los elementos inline no generan saltos de línea: se colocan uno al lado del otro en la misma línea, igual que las palabras de un párrafo. Cuando la línea se llena, el flujo “envuelve” (wraps) automáticamente y continúa en la siguiente línea — exactamente como el texto.

El contenedor inline no tiene width ni height propios controlables desde CSS. Sus dimensiones las determina el contenido, y la tipografía (tamaño de fuente, line-height) define la altura de las líneas. margin-top y margin-bottom se calculan pero no desplazan el flujo de las líneas vecinas.

La interacción entre bloques e inline

En flujo normal, los bloques y los inline conviven de una manera simple: los bloques contienen las líneas (que a su vez contienen los inline). Un <p> es un bloque que contiene una línea de texto; el <strong> dentro del párrafo es inline y fluye dentro de esa línea. Los bloques se apilan verticalmente; los inline fluyen horizontalmente dentro del bloque que los contiene.

Por qué el flujo normal no alcanza para layouts complejos

El flujo normal es ideal para documentos lineales, pero tiene límites estructurales que se hacen evidentes en cuanto un diseño necesita algo más que texto apilado.

No podés poner dos bloques lado a lado. Dos <div> con width: 45% se apilan verticalmente en flujo normal, aunque sobre el 55% de ancho. Un bloque siempre ocupa su propia línea — no hay opción de “ponerlos al lado”.

No podés centrar verticalmente un elemento. El flujo normal no tiene mecanismo para centrado vertical dentro de un contenedor. Los bloques arrancan desde arriba. margin: auto funciona para centrado horizontal en elementos block, pero no para vertical.

No podés reordenar elementos visualmente sin tocar el HTML. El flujo respeta el orden del código de forma estricta. No hay propiedad de flujo normal que cambie el orden visual sin cambiar el markup.

No podés fijar un elemento al viewport mientras el usuario scrollea. Una barra de navegación fija requiere sacar el elemento del flujo normal mediante positioning.

No podés superponer elementos. Un badge sobre un ícono, un tooltip encima del contenido, un modal superpuesto — el flujo normal no tiene forma de crear superposición: cada elemento ocupa su espacio y empuja a los demás.

Las herramientas que modifican el flujo

Para resolver los problemas que el flujo normal no puede resolver, CSS ofrece tres herramientas. En todos los casos, el flujo normal sigue activo para los elementos que no usan esas herramientas: solo los elementos que optan explícitamente por un modelo de layout diferente salen del flujo normal.

Positioning — para sacar un elemento específico de su lugar natural. Permite posicionar un elemento en coordenadas absolutas dentro de su ancestro, o relativas a su lugar natural, o fijo al viewport. Es la herramienta para casos puntuales: tooltips, badges superpuestos, barras de nav fijas. Ver position.

Flexbox — para distribuir y alinear elementos en una dimensión. display: flex convierte el contenedor en un contexto flex: sus hijos directos se organizan en fila o columna con control total sobre la distribución del espacio, la alineación y el orden visual. Resuelve “quiero estos elementos lado a lado” y “quiero centrar algo en su contenedor”. Ver flexbox (próximamente).

CSS Grid — para layouts bidimensionales. display: grid define un sistema de filas y columnas; los hijos directos se ubican en las celdas de esa cuadrícula. Es la herramienta para la estructura general de una página. Ver CSS Grid (próximamente).

Relación con display

El flujo normal no es algo que se activa con una propiedad — es el resultado de que los elementos tengan sus valores de display por defecto (block, inline, list-item). Cambiar display a flex o grid en un contenedor saca a sus hijos del flujo normal y los pone bajo el control de ese modelo de layout. Cambiar display a none saca al elemento del flujo completamente. Cambiar a position: absolute o fixed también saca el elemento del flujo normal.

Ver display para el detalle de los valores y su efecto en el flujo.

Notas, gotchas e interacción

• El flujo normal es el contexto predeterminado, no un modo explícito. No existe una propiedad display: normal-flow. El flujo normal es lo que ocurre cuando no usás ninguna herramienta de layout explícita. Cualquier elemento hijo de un contenedor que no sea flex ni grid está en flujo normal.
• margin: auto para centrado horizontal: en elementos block con width declarado, margin: auto distribuye el espacio sobrante a partes iguales a izquierda y derecha, centrando el elemento horizontalmente. Esto sí funciona en flujo normal. No funciona para centrado vertical.
• El colapso de margins verticales ocurre en flujo normal. Cuando dos elementos block son adyacentes verticalmente, sus margins verticales se fusionan: el mayor gana, no se suman. Esto ocurre en flujo normal; dentro de un contenedor flex o grid los margins no colapsan.
• Positioning relativo no saca el elemento del flujo. position: relative desplaza visualmente el elemento pero mantiene su espacio original en el flujo. Solo absolute y fixed sacan el elemento del flujo.
• Interacción con overflow: establecer overflow distinto de visible en un elemento crea un nuevo block formatting context. Eso hace que sus hijos en flujo normal no colapsen margins con el exterior y que los floats internos queden contenidos.

Vigente / legacy

El flujo normal es la base de CSS desde la versión 1 y no tiene alternativa ni reemplazante. Lo que cambia con el tiempo es la disponibilidad de las herramientas que lo complementan: Flexbox fue ampliamente adoptado a partir de 2015; CSS Grid a partir de 2017. Los floats (float: left/right) eran la herramienta clásica para crear layouts de columnas antes de Flexbox y Grid, y hoy son considerados legacy para ese propósito (aunque siguen siendo vigentes para su uso original: hacer que el texto fluya alrededor de una imagen).

Aprendelo en el recorrido

Este concepto se desarrolla en el módulo Flujo normal del recorrido.