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.