✨
Este artículo es parte de una serie más amplia que está disponible en mi propio sitio web. Haga clic aquí para saber más sobre CSS 101: La Serie. ¡Es completamente gratis!

¡Bienvenido a una explosión del pasado! Antes de que Flexbox y Grid arrasaran como los superhéroes del diseño web moderno, hubo un tiempo en el que los flotadores y los claros dominaban el universo CSS. Si es un novato en diseño web, es posible que se pregunte: "¿Qué son los flotadores y los claros y por qué debería importarme?". Bueno, abróchate el cinturón, porque estamos a punto de hacer un viaje nostálgico a través de la historia de CSS.

Spoiler: ¡quizás encuentres algunos trucos interesantes para usar hoy!

Flotadores: el embaucador del diseño original

Imagínese a Float como el adolescente rebelde del mundo CSS, siempre rompiendo la línea y causando un poco de caos. Los flotadores se diseñaron originalmente para envolver texto alrededor de imágenes, pero los desarrolladores inteligentes rápidamente se dieron cuenta de que también podían usarlos para crear diseños.

img {
    float: left;
    margin-right: 15px;
}

En el ejemplo anterior, float: left; hace que la imagen "flote" hacia la izquierda, permitiendo que el texto se ajuste a su alrededor. Los flotadores eran una opción popular para crear diseños de varias columnas antes de que aparecieran Flexbox y Grid. Sin embargo, pueden ser un poco complicados y propensos a causar problemas de diseño si no se usan con cuidado.

Despeja: Las fuerzas de paz

Las carrozas podrían haber sido un poco rebeldes, pero los claros eran sus fuerzas de paz. La propiedad clara es como el mediador que interviene para resolver el caos que podrían crear las carrozas. Si utiliza elementos flotantes y descubre que los elementos se superponen o no se comportan como se esperaba, clear puede ayudar.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Al agregar una clase clearfix con el CSS anterior, se asegura de que todos los elementos flotantes estén contenidos en su contenedor principal. Es una forma ingeniosa de evitar esos molestos fallos de diseño en los que los elementos parecen flotar hacia el abismo.

Las técnicas de diseño heredadas: un renacimiento retro

Antes de que Flexbox y Grid se robaran la atención, CSS tenía algunos trucos más bajo la manga. A continuación se muestran algunas técnicas de diseño clásicas:

• Bloque en línea: un método simple para crear diseños horizontales. Al configurar elementos para que se muestren: inline-block;, puede alinearlos uno al lado del otro sin necesidad de flotadores.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• Diseños de tablas: Sí, ¡las tablas no eran solo para datos tabulares! Puede usar display: table;, display: table-row; y display: table-cell; para crear diseños tipo cuadrícula.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

Estos métodos han sido eclipsados ​​en gran medida por las técnicas de diseño modernas, pero aún ofrecen una idea de la evolución del diseño web.

Aplicación moderna: mezclar lo antiguo y lo nuevo

Entonces, ¿los flotadores y los transparentes todavía tienen un lugar en el mundo del diseño web moderno? ¡Absolutamente! Si bien Flexbox y Grid son ahora las herramientas de referencia para crear diseños, los flotadores y los borrados pueden seguir siendo útiles en ciertos escenarios, como diseños simples o cuando se trabaja con código heredado.

Por ejemplo, puedes usar elementos flotantes para ajustar el texto o cuando quieras alinear una pequeña cantidad de elementos de una manera sencilla. Pero para diseños complejos y responsivos, Flexbox y Grid son tus mejores amigos.

Resumiendo

Los flotadores, los borrados y otras técnicas de diseño heredadas pueden parecer reliquias del pasado, pero son parte de la rica historia de CSS. Comprenderlos le brinda una base sólida y le ayuda a apreciar el poder de los sistemas de diseño modernos. Además, conocer estos trucos de la vieja escuela puede resultar útil cuando se trata de proyectos más antiguos o desafíos de diseño extravagantes (o esas temidas rondas de entrevistas).

¡Feliz codificación!

✨
¡Pst! Si le gustó lo que leyó, debe hacer clic aquí para consultar CSS 101: La serie. ¡Es completamente gratis!