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.
Top comments (0)