✨
Este artigo faz parte de uma série maior que está disponível em meu próprio site. Clique aqui para saber mais sobre CSS 101: A Série. É totalmente gratuito!

Bem-vindo a uma explosão do passado! Antes do Flexbox e do Grid surgirem como os super-heróis do web design moderno, houve um tempo em que floats e clears dominavam o universo CSS. Se você é um novato em web design, deve estar se perguntando: "O que são floats e clears e por que devo me importar?" Bem, apertem os cintos, porque estamos prestes a fazer uma viagem nostálgica pela história do CSS.

Spoiler: você pode encontrar alguns truques legais para usar hoje!

Flutuadores: o malandro do layout original

Imagine float como o adolescente rebelde do mundo CSS - sempre saindo da linha e causando um pouco de caos. Os carros flutuantes foram originalmente projetados para envolver texto em imagens, mas desenvolvedores inteligentes rapidamente perceberam que também poderiam usá-los para criar layouts.

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

No exemplo acima, float: left; faz a imagem "flutuar" para a esquerda, permitindo que o texto a envolva. Floats eram uma escolha popular para a criação de layouts de várias colunas antes do surgimento do Flexbox e do Grid. No entanto, eles podem ser um pouco meticulosos e propensos a causar problemas de layout se não forem usados ​​com cuidado.

Clears: Os Soldados da Paz

Os carros alegóricos podem ter sido um pouco rebeldes, mas os claros eram seus mantenedores da paz. A propriedade clara é como o mediador que intervém para resolver o caos que os flutuadores podem criar. Se você estiver usando floats e descobrir que os elementos estão se sobrepondo ou não se comportando conforme o esperado, clear pode ajudar.

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

Ao adicionar uma classe clearfix com o CSS acima, você garante que todos os elementos flutuantes estejam contidos em seu contêiner pai. É uma maneira bacana de evitar aquelas falhas irritantes de layout, onde os elementos parecem flutuar no abismo.

As técnicas de layout herdadas: um renascimento retrô

Antes do Flexbox e do Grid roubarem os holofotes, o CSS tinha mais alguns truques na manga. Aqui estão algumas técnicas clássicas de layout:

• Inline-Block: Um método simples para criar layouts horizontais. Ao definir os elementos para display: inline-block;, você pode alinhá-los lado a lado sem a necessidade de flutuadores.

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

• Layouts de tabelas: Sim, as tabelas não serviam apenas para dados tabulares! Você poderia usar display: table;, display: table-row; e display: table-cell; para criar layouts semelhantes a grade.

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

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

Esses métodos foram amplamente ofuscados pelas técnicas modernas de layout, mas ainda oferecem um vislumbre da evolução do web design.

Aplicação moderna: misturando o antigo e o novo

Então, floats e clears ainda têm um lugar no mundo do web design moderno? Absolutamente! Embora Flexbox e Grid sejam agora as ferramentas essenciais para a criação de layouts, floats e clears ainda podem ser úteis em determinados cenários, como layouts simples ou ao trabalhar com código legado.

Por exemplo, você pode usar flutuadores para quebra automática de texto ou quando quiser alinhar um pequeno número de elementos de maneira direta. Mas para layouts complexos e responsivos, Flexbox e Grid são seus melhores amigos.

Resumindo

Floats, clears e outras técnicas de layout legadas podem parecer relíquias do passado, mas fazem parte da rica história do CSS. Compreendê-los fornece uma base sólida e ajuda a apreciar o poder dos sistemas de layout modernos. Além disso, conhecer esses truques da velha escola pode ser útil ao lidar com projetos mais antigos ou desafios de design peculiares (ou aquelas temidas rodadas de entrevistas).

Boa codificação!

✨
Psiu! Se você gostou do que leu, clique aqui para conferir CSS 101: The Series. É totalmente gratuito!