Como funciona o clear em CSS?

Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

A CSS property clear funciona com relação à CSS property float. Ela define se um elemento deve ser movido abaixo dos elementos "floating" que o precedem.

Vamos entender isso com a ajuda de um exemplo.

Consideraremos quatro blocos vermelho, amarelo, azul e verde que serão adicionados um após o outro e todos eles serão colocados no mesmo nível.

Então faremos cada elemento "float" para a "left" um por um, o que significa que eles serão movidos um nível acima de sua posição inicial. Isso permitirá que outros elementos "não-floating" wrap (quebrem) o elemento floating.

Nota - O próximo block ocupará a posição do floating block, por isso não é visível. Quando mudamos a dimensão do próximo block, observamos que ele é coberto com o floating block que está presente uma camada acima dele.

Depois disso, aplicaremos clear:left ao block azul, o que significa que nenhum elemento estará floating à left do block azul.

Com a ajuda da CSS property clear podemos especificar qual lado dos floating elements não pode executar o float. Ela define ou retorna a posição com relação aos floating objects.

Valores aceitos na CSS property clear

 .element { clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; clear: inherit; clear: initial; clear: revert; clear: revert-layer; clear: unset; } 

Abaixo segue o código dos exemplos acima mostrados:

HTML:

<div class="wrapper"> <div class="red block"></div> <div class="yellow block"></div> <div class="blue block"></div> <div class="green block"></div> </div> 

CSS:

.wrapper{ height:100vh; padding: 30px; text:center; background: #3A3B3C; } .block { height:40px; width:40px; border-radius: 4px; } .red { background: #CB6D51; float:left; } .yellow { background:#FBE7A1; float: left; } .blue { background: #3090C7; float: left; clear:both; } .green { background: #2E8B57; float: left; } 

Tentei cobrir o funcionamento da CSS property clear usando um exemplo básico para melhor compreensão. Por favor, compartilhe seus exemplos e sinta-se à vontade para adicionar a este post 😊.

Bom aprendizado!👩🏻‍💻

Fonte

Artigo escrito por Jasmin Virdi.