Flotadores CSS explicados montando una escalera mecánica

Si alguna vez ha subido a una escalera mecánica, puede comprender rápidamente las carrozas.

Tu

es casi perfecto. Decide introducir algunas carrozas para arreglar la relación entre algunos elementos.

Lo siguiente que sabes es que tus elementos recientemente flotantes saltan de tu orden cuidadosamente elegido y se pegan al costado de tu div como un imán. Me viene a la mente la frase "comportamiento no deseado".

Personalmente, he pasado horas tratando de comprender completamente las carrozas. Había leído un artículo y decía: "¡Oh, esto tiene sentido!". Luego volvía a mi código, lo probaba y ... fallaba. De vuelta al tablero de dibujo.

Haré todo lo posible para ahorrarte este destino.

Los flotadores crean flujos alternativos. Esta es la parte más difícil de entender. Y una vez que los presenta, debe escribir su código para que tenga en cuenta hasta tres flujos: normal, izquierdo y derecho. Este es un conjunto completamente nuevo de reglas, en lugar de manipular el ancho de los elementos o su posicionamiento.

En realidad, los flotadores son bastante similares a la dinámica de subir una escalera mecánica, y voy a mostrar cómo se pueden usar junto con la propiedad clara para crear relaciones cristalinas dentro de divs. De esta manera, la próxima vez que intente usar flotantes en su código, no encontrará sorpresas.

Tengo que respetar el carril de pase

El flujo predeterminado de elementos es como la imagen de arriba. Un tipo está parado en el medio con su mano en la barandilla. Está acaparando toda la escalera mecánica. Nadie puede pasarlo. Bastante pobre etiqueta de escalera mecánica, de verdad.

Está parado detrás de un grupo de otras personas que están haciendo lo mismo, por lo que nadie puede pasarlos tampoco. No hay concepto de carriles o decencia humana básica.

Este es el escenario cuando no está utilizando flotadores en absoluto.

Muy bien, ahora estamos hablando! Personas que muestran cierto nivel de conciencia. Me encanta ver eso.

Tenemos un carril formado a la izquierda y otro carril formado a la derecha. Otras personas pueden moverse fácilmente alrededor de las dos personas que están quietas y subir la escalera mecánica más rápidamente, si así lo desean. Nadie está bloqueando el flujo al pararse en el medio.

Este es el escenario cuando estás usando flotadores en tu div. Hay un flujo a la izquierda y un flujo a la derecha, y los elementos que no están flotando pueden llenar fácilmente el espacio que no está ocupado por los elementos flotantes.

Flotadores: izquierda y derecha

El uso de flotadores puede introducir hasta dos flujos nuevos: izquierdo y derecho.

Y esto permite que el flujo normal de elementos, aquellos sin un valor flotante, llene los espacios alrededor de estos elementos.

Los flotadores le permiten crear estas nuevas relaciones entre flujos.

Si tuviera una línea de personas paradas en medio del elevador, tendría opciones limitadas para nuevas estructuras. Pero cuando tiene una columna izquierda y derecha, de repente puede especificar que ciertas personas se paran a la derecha, otras permanecen a la izquierda y otro grupo puede llenar los vacíos.

Esto le permite crear un código más legible y comprensible, porque la propiedad flotante también da una indicación de la relación de un elemento con los elementos circundantes.

La propiedad clara

Hay una arruga más que aún no hemos discutido: la propiedad clara. "Borrar" permite que los elementos especifiquen dónde deben alinearse en comparación con los elementos flotantes.

En la primera imagen de la sección "Flotadores", los dos conductores de las escaleras mecánicas estaban de pie cortésmente a cada lado de la escalera mecánica. Esto permite que otros los pasen y se muevan libremente como lo deseen.

Digamos que en lugar de tener un elemento flotante izquierdo y un elemento flotante derecho, en su lugar tuvimos 3 elementos flotantes izquierdos y 1 a la derecha. Los tres elementos flotantes a la izquierda se apilarían en una línea a la izquierda si también les damos la propiedad "clear: left". Pero si se alinean horizontalmente con el elemento derecho flotante, podría hacer que sea muy difícil o incluso imposible que pase el flujo normal de elementos:

"Clear: left" le dice a cada persona que flota a la izquierda que deben alinearse detrás del primer elemento que flota a la izquierda. Dependiendo del tamaño de las dos personas inferiores, podría ser un desafío para cualquier elemento normal pasar y ocupar el espacio en la parte superior derecha. Por lo tanto, incluso las buenas prácticas de escaleras mecánicas pueden provocar bloqueos.

Uno de los usos más frecuentes de la propiedad clara es "claro: ambos". Esto le permite restablecer el flujo de elementos, en lugar de continuar manteniendo un flujo derecho, izquierdo y normal. Es como ese tipo en la escalera mecánica que ocupa todo el espacio porque trajo su maleta.

Con "claro: ambos", no importa dónde se encuentre ese tipo en orientación a su maleta. No importa quién esté parado a la izquierda o derecha sobre él. Todavía está bloqueando toda la escalera mecánica. Las personas que lo sigan necesitarán comenzar un nuevo flujo de elementos, que podría incluir cualquiera de los tres flujos: izquierdo, derecho o normal.

Se escapó del sistema de tres flujos y restableció las reglas. ¿Malo para las personas que quieren subir las escaleras mecánicas? Seguro. Pero es bueno si quieres evitar que alguien pase.

Observe cómo esto es diferente del único caballero al principio que estaba parado en medio de la escalera mecánica, detrás de una fila de personas que estaban haciendo lo mismo. Ese era un sistema de un flujo. "Claro: ambos" reconoce que puede haber hasta tres flujos y bloquea el paso de cualquier elemento que sigue.

Si te gustó esta publicación, también puedes disfrutar de mis otras explicaciones sobre temas desafiantes de CSS y JavaScript, como posicionamiento, Model-View-Controller y callbacks.

Y si crees que esto podría ayudar a otras personas en la misma posición que tú, ¡dale un "corazón"!

Esta publicación apareció originalmente en el blog CodeAnalogies.