Entendendo de Vez Float e Clear

André Regino
Nov 22, 2017 · 5 min read

Gostaria de começar essa publicação confessando algo: não me dou bem com front-end. Desde um simples posicionamento de um elemento no centro da div até uma estilização das options de um select, a angústia só aumenta.

Um dos problemas mais recorrentes em minha jornada e que atinge 101% dos desenvolvedores Web é:

E mais:

Essas dúvidas, aliadas a não tão genial definição da W3C sobre o assunto, me fizeram ir atrás de tentar entender como ele funciona.

Ao invés de apresentar definições meticulosas que estou(amos) cansado(s) de ler, gostaria de exemplificar visualmente o que cada uma dessas propriedades faz com seu markup.

Antes de Começar…

Em diversos tutoriais que acompanhei pela internet para entender float, clear e outras propriedades comuns, sentia que acabava a leitura com mais perguntas do que respostas…

Por questões didáticas, optei por incluir 5 imagens em meu markup e posicioná-las com float e clear. E é só!! Sem códigos extensos, sem arquivos/bibliotecas/frameworks adicionais, sem servidor web. Para reproduzir o que será feito nos exemplos a seguir, você só irá precisar de:

  • Conhecimento básico em HTML e CSS
  • Editor de textos de sua preferência
  • Navegador “navegável” (IE não vale!)
As 5 Imagens Utilizadas nos Exemplos
Código Base dos Exemplos

Legenda

flutuar elemento → float: left ou float: right
ignorar flutuação → clear: left ou clear: right ou clear: both

Exemplos

  • Como faço para flutuar 1 elemento para a esquerda, e outro para a direita? Float left no HTML e float right no CSS.

  • Agora preciso flutuar todo mundo para a esquerda… float left em todo mundo!

  • Não quero todo mundo na mesma linha… E se o GULP e o SASS fossem para baixo? Preciso dizer ao navegador que quero limpar a formatação e seguir o fluxo da página.
  • Se você pensou no clear, acertou! Basta adicionar clear: left no GULP e o fluxo de seus elementos posteriores seguirá normalmente, ignorando a flutuação a esquerda (por isso clear: left) dos elementos HTML e CSS.

Elevando (um pouco mais) a complexidade

Pronto, agora você já aprendeu de forma (muito) básica como essas duas propriedades funcionam.

Entretanto, em projetos reais, a complexidade é ligeiramente maior: os elementos têm tamanhos distintos, há elementos flutuados para direita, textos, divs, tabelas, iframes

Por isso, vamos complicar um pouco mais os exemplos, mas sempre tendo em vista a proposta estabelecida por este artigo: usar somente float e clear.

Além disso, nos próximos exemplos anexarei o código fonte para você testá-lo, caso queira. Farei uso de CSS inline pois assim o código fica mais enxuto para ser copiado aqui para o Medium (não seja preguiçoso e crie pelo menos um style.css separado de seu markup!).


Consegue imaginar uma maneira de modificar seu estilo para que o resultado fique dessa maneira?

Não se desespere. Vamos elemento a elemento:

  • HTML e CSS: flutue-os a esquerda
  • JS: flutue o elemento a direita e, para não ficar na mesma linha que os elementos HTML e CSS, basta limpar a flutuação a esquerda
  • GULP: faça o inverso do JS flutuando para a esquerda e limpando a flutuação a direita, para não permanecer na mesma linha que o JS
  • SASS: para não permanecer na mesma linha que o GULP, limpe a flutuação a esquerda

Achou complexo? Vamos para mais um exemplo.


Seguindo o resultado final da último exemplo, consegue modificá-lo para ficar da maneira exposta abaixo?

Vamos para o passo a passo:

  • HTML e CSS: permanecem inalteráveis
  • JS: retire o clear
  • GULP: retire o clear
  • SASS: flutue-o para a direita e altere o clear para left

No caso do GULP, caso o valor do clear fosse alterado para left, o elemento limparia toda a flutuação a esquerda e ficaria abaixo dos elementos HTML e CSS. Retirando-se o clear, o elemento fica posicionado na mesma linha que estes elementos.

Com clear: left vs sem clear

Com o SASS flutua-se o elemento para direita. Caso o valor do clear fosse alterado para right, o elemento limparia toda a flutuação a direita e ficaria abaixo do elemento JS. Como queremos que ele fique abaixo do elementos HTML, CSS e GULP, basta limpar a flutuação a esquerda com clear: left.

Com clear: right vs com clear: left

Este artigo se propôs a exibir de forma sucinta através de exemplos práticos o uso das propriedades float e clear, e como trabalhá-las em conjunto.

Significa que é a melhor maneira disponível no mercado? Não.

Significa que é a única? Nem de longe.

Só consigo posicionar com essas 2 propriedades? Não. Você ainda deve levar em conta as propriedades position, display, overflow, z-index…

Caso deseje intensificar seus estudos em front-end, sugiro dar uma olhada no Flexbox (recomendadíssimo!), pré-processadores CSS (SASS e LESS), templates (Blade) e claro, não podia faltar, os milhões de frameworks e libs JS que estão saindo dia após dia (desafio a procurar uma vaga para front-end em capitais que não requisite nenhum desses frameworks!).

Gostou desse artigo? Bateu aquela vontade de clonar aqueles projetos antigos e tentar entender os usos dos floats e clears? Deixe nos comentários sua opinião!

Obrigado pela atenção.

André Regino

Blog pessoal sobre meus descobrimentos no mundo do desenvolvimento web

André Regino

Written by

Meu espaço online para comentar sobre descobertas no mundo TI, mais especificamente na área de Desenvolvimento Web

André Regino

Blog pessoal sobre meus descobrimentos no mundo do desenvolvimento web