Você sabe como funciona de fato a propriedade float? Aprenda nessa aula como usar corretamente o float no CSS.

Sabemos que para a página ser mostrada na tela aos usuários o navegador percorre todo o seu HTML e vai renderizando os elementos na ordem.

O navegador segue o fluxo dos elementos, um elemento é mostrado após o outro até que toda sua página esteja pronta para ser mostrada. Sabendo que existe esse fluxo de um elemento seguido de outro, existe uma forma de tirar um elemento do fluxo normal.

Mudança de contexto

A propriedade float no CSS serve justamente para tirar um elemento do seu fluxo normal, tirar do contexto normal dele, fazendo com que esse elemento fique numa camada diferente dos outros elementos.

Quando temos por exemplo 3 divs (elemento block) uma seguida da outra, sabemos que as 3 são renderizadas uma abaixo da outra como no exemplo abaixo:

Se colocarmos na div 1 a propriedade “float: left” o que aconteceria? Vamos dar uma olhada:

A div 2 (verde) sumiu… O que aconteceu? Simples! Quando eu uso o “float: left” estou dizendo que o elemento deve sair de seu fluxo normal (junto aos outros elementos) e ir para uma nova camada, e nessa camada ele deve flutuar no lado esquerdo.

Aconteceu isso com a primeira div (vermelha), como eu percebi? A div 1 que recebeu o float “pulou” para uma camada à frente das outras, a segunda div então (verde) passou a ocupar o espaço que era da primeira, e a terceira div passou a ocupar o espaço da segunda.

A segunda div está na verdade atrás da primeira div (vermelha) por isso não a estamos vendo. Como a primeira passou a flutuar numa camada diferente (a frente) ela está ocupando o mesmo espaço que a segunda div, só que por cima, cobrindo a div 2 (verde).

A propriedade float no CSS pode fazer os elementos flutuarem a esquerda ou a direita, para isso declaramos: “float: left” para flutuar a esquerda ou “float: right” para o elemento flutuar a direita.

E se as 3 flutuarem?

E se no exemplo das 3 divs anterior colocássemos float left em todas as 3? Teríamos:

Todos os 3 elementos iriam mudar de contexto, e iam ficar juntos nesse novo contexto. Todos os 3 vão flutuar juntos um ao lado do outro, ainda que sejam elementos do tipo block como é a “div”.

O primeiro elemento como foi renderizado primeiro vai ocupar a primeira posição à esquerda desse contexto de flutuação. O segundo vai ocupar a segunda posição e o terceiro vai ocupar a terceira posição.

Se colocássemos para flutuarem à direita ficaria:

Seguindo a lógica do outro exemplo, como a div vermelha foi a primeira a fluturar à direita ela ocupa a primeira posição da direita para a esquerda. Os outros elementos são colocados na ordem de renderização.

Um problema

Ao colocar um parágrafo depois de um elemento com “float” por exemplo, ele vai ser mostrado ao redor do elemento que flutua:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley simply dummy text of the printing and typesetting industry.

Quando usamos um elemento do tipo inline após um elemento flutuante, ele consegue entender o conteúdo do que flutua e ficar ao lado. Daí você pode se perguntar: “O parágrafo não é do tipo block?”.

Sim! O parágrafo é block, mas os textos no HTML se comportam como inline, portanto ainda que o elemento seja block, o texto dentro dele vai se comportar como inline, se alinhando ao lado do elemento flutuante.

Então para que você utilize um elemento block após um elemento com float sem ser afetado por ele, você deve usar a propriedade “clear” nesse elemento seguinte, para limpar os efeitos que o float deixa. Ex.:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Clear

Ao usar a propriedade “clear” num elemento que vem após um elemento com “float” limpamos qualquer influência do “float” do elemento anterior para o fluxo dos elementos seguintes.

Se o elemento anterior tiver “float: left” usamos no elemento seguinte o “clear: left”, se o elemento anterior tiver “float: right” usamos o “clear: right”. Podemos também usar o valor “clear: both”, esse valor limpa a influência do float anterior de ambos os lados (esquerdo ou direito).

Códigos da aula

See the Pen Float no CSS by frontend.com.br (@labfrontend) on CodePen.

Agora que já sabemos como funciona a propriedade float no CSS, vamos continuar evoluindo na próxima aula: