3.0 KiB
| title | localeTitle |
|---|---|
| Float and Clear | Flutuar e Limpar |
Flutuar e Limpar
A propriedade float CSS especifica como um elemento deve flutuar.
A propriedade clear CSS especifica quais elementos podem flutuar ao lado do elemento limpo e em qual lado.
A propriedade float
A propriedade float é usada para posicionamento e layout em páginas da web.
A propriedade float pode ter um dos seguintes valores:
left - O elemento flutua à esquerda do contêiner right - o elemento flutua à direita do contêiner none - O elemento não flutua (será exibido exatamente onde ocorre no texto). Este é o padrão inherit - O elemento herda o valor float de seu pai Em seu uso mais simples, a propriedade float pode ser usada para envolver o texto em torno das imagens.
Flutuar na Imagem:
img {
float: right;
}
Este exemplo especifica que uma imagem deve flutuar para a direita em uma página:
img {
float: left;
}
Este exemplo especifica que uma imagem deve flutuar à esquerda em uma página:
img {
float: none;
}
No exemplo a seguir, a imagem será exibida exatamente onde ocorre no texto ( float: none; ):
A propriedade clear
A propriedade clear especifica quais elementos podem flutuar ao lado do elemento limpo e de que lado.
A propriedade clear pode ter um dos seguintes valores:
none - permite elementos flutuantes em ambos os lados. Este é o padrão left - Nenhum elemento flutuante permitido no lado esquerdo right - Nenhum elemento flutuante permitido no lado direito both - Nenhum elemento flutuante permitido no lado esquerdo ou no lado direito inherit - O elemento herda o valor claro de seu pai A maneira mais comum de usar a propriedade clear é depois de você ter usado uma propriedade float em um elemento.
Ao limpar os flutuadores, você deve combinar o clear para o float . Se um elemento estiver flutuando para a left , você deve clear para a left . Seu elemento float continuará a float , mas o elemento limpo aparecerá abaixo dele na página da web.
Exemplo:
Fonte: CSS-TRICS
div {
clear: left;
}
Fonte: CSS-TRICS
Recursos adicionais:
- CSS do MDN: Float & Clear
- Tutoriais do W3Schools
- CSS-Tricks: flutuar e limpar