Entendendo de Vez Float e Clear

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 é:

Qual a utilidade do bendito float?

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.

“The CSS float property specifies how an element should float.” — W3C

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…

Só queria entender o básico de posicionamento de objetos na tela, por qual motivo devo importar o Bootstrap em meu projeto? Flexbox, é de comer? Método da div vazia é semanticamente correto?

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.