Cuando escribimos código HTML, los elementos en la página web aparecen en el mismo orden en que los colocamos en el documento. Esto se debe a algo llamado flujo normal del documento.
Para entender cómo funciona, primero recordemos los dos tipos principales de elementos en HTML:
- Elementos de bloque: Se colocan uno debajo del otro y ocupan todo el ancho disponible.
- Elementos en línea: Ocupan solo el espacio necesario y se alinean en la misma línea con otros elementos en línea.
Elementos de bloque
Los elementos de bloque crean una especie de "pila", donde cada uno se coloca debajo del anterior.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Cada <div> es un elemento de bloque, por lo que no pueden aparecer en la misma línea.
Imagina que tienes cajas grandes y las colocas dentro de una caja más grande. Como cada caja ocupa todo el ancho disponible, las tienes que apilar una sobre otra.
Elementos en línea
A diferencia de los elementos de bloque, los elementos en línea se posicionan uno al lado del otro siempre que haya suficiente espacio.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Imagínate que tienes cajas pequeñas en un estante. En lugar de apilarse, se acomodan en una fila.
Modificando el flujo normal
A veces, necesitamos cambiar la organización predeterminada de los elementos en la página. Para hacerlo, CSS nos ofrece algunas herramientas que permiten modificar el flujo normal:
Flujo flotante (float)
- Permite que los elementos se ubiquen a la izquierda o derecha de su contenedor, permitiendo que otros elementos fluyan a su alrededor.
- Se usa en diseños como imágenes con texto envolvente.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Posicionamiento absoluto (position: absolute)
- Permite colocar un elemento en cualquier parte de la pantalla, sacándolo del flujo normal.
- Se usa, por ejemplo, para menús emergentes o elementos que deben mantenerse en un lugar fijo.
Estas herramientas nos permiten organizar los elementos de una web de maneras más flexibles e interesantes.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Combinación de técnicas
En una página web real, es común combinar distintos tipos de elementos y flujos para lograr el diseño deseado. Por ejemplo, en un sitio web podemos tener:
- Encabezados en la parte superior (bloque).
- Imágenes con texto a su alrededor (flotante).
- Botones en una barra de navegación (en línea o en línea con
display: flex).
Resumen
- El flujo normal de los documentos HTML es el orden en que los elementos aparecen en el código.
- Los elementos de bloque ocupan todo el ancho disponible y se colocan uno debajo de otro.
- Los elementos en línea solo ocupan el ancho necesario y se alinean en la misma línea con otros elementos en línea.
- Podemos cambiar el flujo utilizando CSS:
floatpermite que los elementos se ubiquen a los lados y otros elementos los rodeen.position: absolutepermite colocar un elemento en una posición específica, sacándolo del flujo normal.
- Combinar estos mecanismos ayuda a crear diseños web más flexibles y atractivos.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
