Posicionado y disposición: normal flow

En CSS existen 3 formas de posicionar elementos que permiten tener el control de la disposición de la página: normal flow, float y positioning. Este es el comienzo de una serie donde se irá abordando cada uno de los métodos.

 Este post explicará el primero, el normal flow o flujo normal. Por defecto, los elementos se distribuyen usando un flujo normal o estático. En el flujo normal, los elementos block dentro de una página se posicionan de arriba a abajo (comienzan una nueva línea) y los elementos inline de izquierda a derecha (no comienzan una nueva lína).

Elementos inline y block en normal flow

Por ejemplo las cabeceras y los párrafos aparecen en líneas diferentes, mientras sus contenidos que pueden ser contener un <b> como un <span> se sitúan dentro del párrafo o de otro elemento estilo block sin empezar una nueva línea.

Un ejemplo con 2 párrafos, cada uno es un tipo block situado uno encima de otro. Dentro de cada párrafo es un ejemplo de un elemento inline, en este caso un elemento <b> (negrita) y <em>(cursiva). Daré un poco de estilo para delimitarlos mejor.

css normal flow

Ejemplo de normal flow

Como se puede apreciar en el ejemplo los párrafos están en líneas diferentes (elementos block) y los <b> y <em> están en línea con el contenido (elementos inline).

Para poder cambiar las posiciones de ese tipo de elementos de su flujo normal, se pueden modificar las propiedades float y position que serán explicadas más adelante.

Hasta aquí el tutorial de hoy, espero que hayáis aprendido mucho. Buen finde 🙂