El punto de partida de todo layout
En CAT-16 viste que los elementos block se apilan y los inline fluyen con el texto. Eso que viste es el flujo normal: el nombre del mecanismo por defecto que usa el navegador para disponer elementos cuando no aplicás ninguna herramienta de layout.
El flujo normal no es un truquito de CSS — es el modo de partida del navegador. Cuando escribís HTML puro, sin agregar position, ni Flexbox, ni Grid, estás viendo el flujo normal en acción.
Cómo dispone el navegador los elementos
El flujo normal tiene dos modos, uno para cada tipo de elemento:
Modo bloque — apilamiento vertical
Los elementos block (como <p>, <h2>, <div>) se apilan verticalmente, uno debajo del otro. Cada uno ocupa todo el ancho disponible de su contenedor, aunque tenga poco contenido. No importa si les “sobra” espacio al costado: un elemento block siempre empieza en una nueva línea y el siguiente arranca debajo de él.
<p class="descripcion">Café del día: Espresso</p>
<p class="descripcion">Precio: $4,50</p>
<!-- Los dos párrafos se apilan aunque ocupen poco espacio horizontal -->Modo inline — flujo horizontal
Los elementos inline (como <strong>, <em>, <span>) no generan saltos de línea: fluyen horizontalmente, como las palabras de una oración. Cuando no hay más espacio en la línea, el flujo “envuelve” y continúa abajo — exactamente igual que el texto.
<p>
Probá nuestro <strong>Cold Brew</strong>
o el <em>Flat White</em> — el mejor de la cuadra.
</p>
<!-- strong y em fluyen dentro del párrafo, en la misma línea -->Para contenido lineal — artículos, posts, páginas de texto — el flujo normal es perfecto. Las secciones se apilan, los párrafos se apilan, el texto fluye. Funciona bien sin que el autor haga nada extra.
Por qué el flujo normal no alcanza para layouts complejos
El flujo normal es excelente para documentos, pero se queda corto en cuanto el diseño necesita algo más que “texto apilado”. Las cinco limitaciones que aparecen antes o después:
1. No podés poner dos bloques lado a lado.
El caso más clásico: dos columnas. Con flujo normal, dos <div> de ancho 45% cada uno se apilan verticalmente en vez de quedar en la misma fila. Un block siempre genera salto de línea — no importa cuánto ancho “sobre”.
2. No podés centrar verticalmente un elemento.
El flujo normal no tiene un mecanismo para decir “poné este elemento en el centro vertical de su contenedor”. Los bloques se apilan desde arriba. margin: auto funciona para centrado horizontal en elementos block, pero no para vertical.
3. No podés reordenar elementos visualmente sin tocar el HTML.
El flujo normal respeta estrictamente el orden del HTML. Si el primer <div> va primero en el markup, siempre va primero en la pantalla — no hay forma de cambiar el orden visual sin modificar el HTML.
4. No podés fijar un elemento en la pantalla.
Una barra de navegación que permanezca visible al hacer scroll — el flujo normal no lo permite. Los elementos siguen el documento.
5. No podés hacer que un elemento “salga” de su lugar sin desplazar a los demás.
Un badge encima de un botón, un tooltip flotando sobre otro contenido, un modal superpuesto — el flujo normal no tiene forma de crear eso: cada elemento ocupa su espacio y empuja a los demás.
Observalo en el preview
Acá hay una página simple del menú de Café Aroma. Fijate en los dos <div class="col"> — aunque cada uno tiene width: 45%, se apilan verticalmente. El CSS de partida incluye un comentario que explica por qué:
<h2 class="titulo">Menú de Café Aroma</h2>
<p class="descripcion">
Nuestros cafés son de
<strong>origen único</strong>,
tostados esta semana en <em>Buenos Aires</em>.
</p>
<p class="descripcion">
Horario: lunes a viernes de 8 a 20 h.
</p>
<div class="col">
<h3>Bebidas calientes</h3>
<p>Espresso, cortado, latte, cappuccino.</p>
</div>
<div class="col">
<h3>Bebidas frías</h3>
<p>Cold brew, frappe, tónica de café.</p>
</div>.titulo {
color: #92400e;
}
.descripcion {
color: #374151;
line-height: 1.6;
}
.col {
width: 45%;
background: #fef3c7;
padding: 12px;
margin: 8px;
}
/* Observá en el preview: aunque cada .col tiene width: 45%,
los dos divs se apilan verticalmente.
El flujo normal los pone uno debajo del otro siempre.
En los próximos módulos vas a aprender a cambiar eso con Flexbox y Grid. */Lo que estás viendo es el flujo normal en su límite: perfecto para apilar, pero incapaz de poner dos bloques lado a lado.
Las herramientas que modifican el flujo
Hay tres herramientas modernas para resolver los problemas que el flujo solo no puede resolver. En esta lección solo presentamos el rol de cada una — la sintaxis viene en los módulos siguientes.
Positioning — para sacar UN elemento de su lugar
Permite que un elemento salga del flujo y se posicione en un lugar específico. Es para casos puntuales: una barra fija al hacer scroll, un tooltip encima del contenido, un badge superpuesto sobre un ícono. No es la herramienta general de layout.
Flexbox — para distribuir elementos en UNA dimensión
Es la herramienta para alinear y distribuir elementos en una sola dirección — en fila (horizontal) o en columna (vertical). Resuelve el problema de “quiero estos elementos lado a lado” o “quiero centrar algo dentro de su contenedor”.
CSS Grid — para layouts en DOS dimensiones
Es la herramienta para layouts bidimensionales: filas y columnas al mismo tiempo. Es la más poderosa para definir la estructura completa de una página.
| Necesito… | Herramienta |
|---|---|
| Sacar UN elemento de su lugar (fijo, superpuesto) | Positioning |
| Distribuir/alinear elementos en UNA dirección (fila o columna) | Flexbox |
| Layout en DOS dimensiones (filas y columnas simultáneas) | CSS Grid |
El flujo normal sigue activo para todos los elementos que no usan estas herramientas. Positioning, Flexbox y Grid modifican el flujo para los elementos que lo necesitan; el resto sigue en flujo normal.
Con esto completaste el repertorio de CSS sobre una sola caja. A partir del siguiente módulo vas a aprender a disponer múltiples cajas juntas. Empezamos con Positioning — la herramienta para sacar un elemento de su lugar en casos específicos.
Sandbox libre — probá lo que aprendiste:
Preview