A la hora de diseñar una página web, hay muchas propiedades que pueden afectar el posicionamiento de nuestros elementos y alterar nuestra estructura. En este post te presentamos dos propiedades que crean cambios de flujo estático en CSS y transforman la disposición de nuestros elementos de manera automática.
Elementos flotantes en CSS
Para hablar sobre los cambios de flujo estático en CSS, vamos a comenzar por explicarte qué son los elementos flotantes.
La etiqueta float en CSS es una propiedad que permite que un elemento HTML se posicione de tal manera que los demás elementos del documento HTML, normalmente textos, fluyan a su alrededor. Esto es muy común en revistas con imágenes rodeadas por texto.
Dentro de la propiedad float hay dos opciones. Podemos hacer “flotar” un elemento a la izquierda o a la derecha de nuestra página web usando las opciones float:left y float:right. Estas opciones harán que nuestro elemento flotante se pegue a algún borde de la página web y permita que los demás elementos fluyan a su alrededor. Al agregar elementos flotantes en CSS, el resto de los elementos presentes se ajustarán a los espacios que estos dejan vacíos.
Si tenemos una imagen flotando, el texto se acomodará a su alrededor en vez de simplemente situarse debajo. Lo interesante de esta propiedad es que el texto siempre se ajustará aunque las características de la imagen cambien. Si, por ejemplo, hacemos que la imagen sea más grande o tenga un padding, el texto se modificará para ocupar el nuevo espacio vacío.
Propiedad clear en CSS
La propiedad clear en CSS controla el flujo de los elementos al rededor de los elementos flotantes. Esto quiere decir que determina cómo debería comportarse un elemento al lado de un elemento flotante. Al seleccionar una de las opciones de esta propiedad (left, right o both) le estamos diciendo al elemento que siempre empiece después del elemento flotante. Si tenemos, por ejemplo, una imagen con la propiedad float:left y un párrafo después, normalmente el párrafo llenará los espacios a la derecha de la imagen. Pero si le damos la propiedad clear:left, el párrafo empezará después de la imagen (debajo).
Esta propiedad tiene tres opciones. Usamos clear: left cuando queremos que nuestro elemento empiece debajo de aquellos elementos que flotan a la izquierda, right para aquellos que flotan a la derecha y both para aplicar la propiedad a ambos lados.
Ten en cuenta que, si tienes un elemento que tiene a todos sus hijos como elementos flotantes, perderá su altura. Por ejemplo, si tienes un bloque div y dentro de este tienes dos elementos de párrafo flotantes, el div perderá la altura que le has otorgado. Esto sucede porque un elemento flotante está fuera del flujo estático en CSS e ignora las reglas de los demás elementos. Entonces, el elemento padre se queda sin altura porque el navegador entiende que realmente no tiene nada dentro, está vacío y, por ende, sin altura. Es importante tener esto en cuenta, porque puede llegar a obstaculizar lo cálculos que hagas de ocupaciones y alturas.
Para arreglar este efecto extraño que produce la inserción de elementos flotantes, hay una variedad de trucos que llamamos comúnmente clearfix. A continuación te presentamos uno de ellos.
Clear-fix en CSS
Una manera que encontramos para solucionar la desaparición de la altura en elementos padre de elementos flotantes es utilizar el pseudoelemento ::after. Te invitamos a leer nuestro post sobre pseudoclases y pseudoelementos en CSS si quieres una introducción a estos conceptos. Como resumen, el pseudoelemento ::after permite acceder al espacio justo después de la apertura de un elemento HTML. Para utilizar este pseudoelemento como clear-fix, debemos elegir el espacio justo después de nuestro elemento div padre. Esto quiere decir que siempre seleccionaremos el espacio justo después del elemento que tiene problemas cargando su altura y necesita la solución.
Entonces, lo que haremos primero será insertar el elemento ::after en el elemento padre. Recuerda que siempre que insertes un pseudoelemento ::after o ::before necesitas insertarle un contenido, que puede ser vacío, pero que siempre debe estar presente. Una vez insertado el pseudoelemento, podemos añadirle la propiedad clear con la opción de both y la propiedad display:block. Esto hará que el pseudoelemento sea un bloque que se sitúa siempre después de los elementos flotantes. Como el pseudoelemento forma parte del elemento padre, su posición después de los hijos hará que el bloque se extienda e incluya dentro a los hijos flotantes.
¿Quieres seguir aprendiendo?
Ahora que sabes la teoría sobre cómo funcionan los cambios de flujo estático en CSS y cómo utilizarlos para crear una estructura y diseño más fluido, ¡es el momento de que aprendas de manera práctica! En KeepCoding sabemos que cada post que lees sobre la teoría, los trucos y las sugerencias del desarrollo web, como el flujo estático en CSS, te motiva a empezar tu propio archivo con tus propias línea de código. Por ello, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde encontrarás la mezcla perfecta entre la teoría y la práctica para convertirte en un experto y triunfar en el sector IT.
En nuestro bootcamp aprenderás, entre muchas otras cosas, cómo utilizar lCSS y HTML para crear tu propia página web y diseñarla a tu gusto. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Pide más información y anímate a matricularte!
