Neste tutorial de CSS, vamos aprender uma das propriedades mais importantes e clássicas na estilização de sites: o famigerado float.
Com ele, por muito tempo, tivemos o controle sobre o posicionamento de todo e qualquer elemento de nossos sites. Isso nos possibilitou a criação de layouts mais profissionais usando apenas o CSS, sem depender daquelas marcações bizarras dos anos 90.
Hoje o mercado mudou bastante e existem ferramentas mais novas, mas se você não entender como o `float` funciona, você nunca vai conseguir dar manutenção em projetos legados. Senta aí, abre o seu editor de código e bora ver como a magia (e as dores de cabeça) do alinhamento acontecem no DOM.
A Treta do Posicionamento: Entendendo a Propriedade Float no CSS (e como não quebrar o seu layout)
float em CSS - O que é e Para que serve?
Como centralizar ou posicionar elementos com CSS Float? A propriedade float no CSS instrui o navegador a "flutuar" um elemento (como uma imagem ou uma div) para a esquerda (left) ou direita (right) do seu container. Isso permite que outros elementos, como blocos de texto, fluam ao redor dele de forma orgânica.
Pensa comigo: quando adicionamos um elemento no nosso site, como uma tag <h1> com o nome do site, onde ele se localiza na tela? Bem no início, no topo e colado na esquerda, certo?
E se colocarmos uma descrição, como uma tag <h2>, onde ela se posiciona? Abaixo da tag H1, também na esquerda. Isso acontece porque as tags de cabeçalho têm o comportamento padrão de display block (elas ocupam a linha inteira).
Depois, podemos colocar uma imagem, que vai ficar na esquerda, abaixo da tag H2. E em seguida um texto... Tudo vai sendo empilhado. Essa brincadeira nos mostra uma regra fundamental da renderização web: os elementos são adicionados, automaticamente, de cima para baixo e da esquerda para a direita.
float foi criado inicialmente para imitar os jornais impressos! A ideia original era fazer apenas imagens "flutuarem" para que os parágrafos de texto pudessem contorná-las elegantemente. Mas a comunidade Front-End é criativa e começou a usar isso para estruturar layouts inteiros!
E se quisermos colocar uma imagem na esquerda e uma segunda imagem na mesma linha, não colada nela, mas lááá na direita do site? É aí que a propriedade float (flutuar, em inglês) entra em ação salvando o dia.
Como usar float: left e float: right na prática
Para fazer com que um elemento se posicione na esquerda, usamos a regra:
float: left;Já para forçar um elemento a flutuar na direita extrema do seu contêiner, aplicamos:
float: right;E se você quiser "resetar" e retirar o efeito flutuante de um elemento que herdou isso, basta declarar:
float: none;A Mão na Massa: Criando um Layout Básico com Float
Nós não somos teóricos de biblioteca, nós escrevemos código. Vamos criar um layout super clássico e simples com um cabeçalho (header), um artigo (article) e um menu lateral (sidebar).
Veja como estruturar o HTML usando divisões lógicas:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Tutorial de CSS - A Propriedade Float</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="header">
<h1>Curso HTML Progressivo</h1>
<h2>Apostila online, gratuita e completa</h2>
</div>
<!-- Coluna da esquerda -->
<div class="article">
<p>Aqui vem o texto principal do site.</p>
<p>É o corpo de conteúdo que você está lendo.</p>
</div>
<!-- Coluna da direita -->
<div class="sidebar">
<p>Menu lateral para navegação.</p>
</div>
</body>
</html>Agora vem a mágica no CSS. Como a div padrão ocupa 100% da tela (block), nós precisamos avisar o navegador que a div .article terá 60% do tamanho e vai flutuar à esquerda, enquanto a .sidebar terá 30% e vai flutuar à direita.
.header {
width: 100%;
border-bottom: 2px solid #ccc;
text-align: center;
padding: 10px;
}
.article {
width: 60%;
float: left; /* Cola na esquerda */
background: #f1f5f9;
padding: 15px;
}
.sidebar {
width: 30%;
float: right; /* Cola na direita */
background: #e2e8f0;
padding: 15px;
}Resultado ao vivo (Simulação de Renderização):
Criando Layout de Três Colunas (O Padrão dos Blogs Clássicos)
Em milhares de sites institucionais e blogs antigos, é muito comum ver o famoso modelo de três colunas: um menu esquerdo, o conteúdo no centro e um menu direito.
A lógica de empilhamento aqui exige atenção. Para fazer isso, criamos duas divs de menu lateral (sidebar1 e sidebar2) e intercalamos com o conteúdo.
<!-- Exemplo enxuto de Três Colunas -->
<div class="header"><h1>Meu Mega Portal</h1></div>
<div class="sidebar">
<p>Menu Esquerdo (HTML, CSS)</p>
</div>
<div class="article">
<p>Conteúdo Massivo e Principal do Blog.</p>
</div>
<div class="sidebar2">
<p>Menu Direito (JavaScript, [INSERIR LINK: CURSO DE PHP])</p>
</div>Aplicando o espaçamento correto (usando padding) e jogando a primeira barra para a esquerda e a última para a direita, chegamos a esse CSS:
.header {
width: 100%;
background-color: #2563eb;
color: white;
}
.sidebar {
width: 25%;
float: left; /* Gruda na esquerda */
background-color: #cbd5e1;
}
.article {
width: 40%;
float: left; /* Flutua encostando na sidebar esquerda */
padding-left: 5%;
padding-right: 5%;
}
.sidebar2 {
width: 25%;
float: right; /* Gruda na extrema direita */
background-color: #cbd5e1;
}
Quer virar um programador "Full-Stack" de verdade? 💻🔥
Se dominar HTML e CSS já te abre portas, imagina ter o conhecimento de Lógica, Java, C, C++ e Python tudo na palma da sua mão? Nós envelopamos TODO o ecossistema Progressivo em um único pacote monstruoso.
Colunas Dentro De Uma Coluna: O Princípio do Relativismo no Float
Aqui acontece um dos maiores erros de quem está começando. Quando aplicamos float: left ou float: right, não estamos obrigando o elemento a ir totalmente para a extrema esquerda do monitor ou tela geral, e sim para os limites da div que o engloba (o famoso "elemento pai").
Nos exemplos anteriores, as divs vão para o máximo da tela porque estão ligadas diretamente à tag principal <body>. Mas, se tais elementos estivessem dentro de uma <div> (como um container de 800px de largura centrado na tela), eles iriam flutuar para a esquerda ou para a direita respeitando as bordas dessa caixa de 800px.
float dentro de uma div pai, a div pai vai "esquecer" a própria altura e o seu fundo/borda vai colapsar (ficar tamanho zero). Para corrigir essa dor de cabeça clássica da web, nós criamos uma classe chamada clearfix com as propriedades: content: ""; display: table; clear: both; que resolve esse bug imediatamente. Fica a dica de desenvolvedor cascudo!
Para aprender profundamente a manipular o Box Model e testar esses códigos visualmente com mais maestria, acompanhe a documentação oficial na MDN Web Docs, que é o nosso "dicionário" definitivo no Front-End.
Dúvidas Frequentes sobre a Propriedade Float (FAQ)
Ainda devo usar Float para criar layouts de sites modernos?
Geralmente, não. Para o design completo da estrutura de um site, as tecnologias modernas recomendadas pelo mercado são o Flexbox (para layouts em 1 dimensão) e o CSS Grid (para criar colunas e linhas bidimensionais complexas). Use o float preferencialmente para o seu objetivo original: contornar texto ao redor de imagens, ou para dar suporte a projetos legados antigos.
Como cancelo o efeito do float no elemento seguinte?
Se você tem um texto flutuando e quer que o próximo parágrafo ou footer caia naturalmente para a linha debaixo, sem se alinhar ao lado, você deve usar a propriedade clear. As opções mais comuns são clear: left;, clear: right; ou simplesmente clear: both; para interromper a flutuação de ambos os lados e "limpar" o fluxo do documento.
Por que o background da minha Div sumiu ao usar o Float?
Esse é o clássico erro conhecido como "Colapso do Elemento Pai". Como os elementos internos estão "flutuando", eles saem do fluxo normal da página e o navegador acha que a Div pai está vazia, reduzindo sua altura para zero. A solução rápida é aplicar no pai a propriedade CSS overflow: hidden; ou usar a técnica avançada do Clearfix no CSS.
O que estudar a seguir:
- O sucessor do Float: Como usar Flexbox e alinhar tudo fácil (em breve).
- A Treta do Box Model e como usar o Clearfix.
- POSICIONAMENTO ABSOLUTO E RELATIVO
Nenhum comentário:
Postar um comentário