El flujo de un sitio web

El flujo de un sitio web dice relación con cómo los elementos se disponen de manera natural en un sitio.

En CSS los elementos se ubican de arriba abajo y de izquierda a derecha en el mismo orden que son ingresados en HTML.

Los elementos en bloque se montan uno sobre otro utilizando todo el ancho de su elemento contenedor. Los elementos en linea en tanto, se sitúan uno al lado del otro.

Si cambiamos el tamaño de la ventana del navegador, los elementos en bloque se expanden o contraen mientras que los en linea se adaptan al ancho correspondiente.

Ejemplo

Tomemos este código que representa cuatro elementos en bloque.

<h1>Este es el título de mi sitio</h1>
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<h2>Este es un subtítulo</h2>
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>

Este código se visualizaría así:

Este es el título de mi sitio

Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.

Este es un subtítulo

Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.

Vemos que todos los elementos son en bloque por lo tanto ocupan todo el ancho disponible en su contenedor y están uno sobre otro. Los elementos en linea como el texto se ubican lado a lado hasta el límite de su contenedor y luego continúan en la siguiente linea.

Importante

En el flujo natural de una página, los elementos afectan a aquellos que los rodean, este comportamiento evita que éstos se monten uno encima del otro.

A través de las propiedades float y position, podemos cambiar este comportamiento y sacar los elementos del flujo natural.