Como funciona o clear em CSS?

This content originally appeared on DEV Community and was authored by doug-source

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.

This content originally appeared on DEV Community and was authored by doug-source

Print Share Comment Cite Upload Translate Updates

APA

doug-source | Sciencx (2024-09-04T17:52:41+00:00) Como funciona o clear em CSS?. Retrieved from https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/

MLA

" » Como funciona o clear em CSS?." doug-source | Sciencx - Wednesday September 4, 2024, https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/

HARVARD

doug-source | Sciencx Wednesday September 4, 2024 » Como funciona o clear em CSS?., viewed ,<https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/>

VANCOUVER

doug-source | Sciencx - » Como funciona o clear em CSS?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/

CHICAGO

" » Como funciona o clear em CSS?." doug-source | Sciencx - Accessed . https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/

IEEE

" » Como funciona o clear em CSS?." doug-source | Sciencx [Online]. Available: https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/. [Accessed: ]

rf:citation

» Como funciona o clear em CSS? | doug-source | Sciencx | https://www.scien.cx/2024/09/04/como-funciona-o-clear-em-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Valores aceitos na CSS property clear

Fonte

Related Posts