Skip to main content

Entendendo a propriedade Limpar CSS

Posicionando elementos utilizando clear e float. HTML5 a CSS3 aula 24 (Abril 2025)

Posicionando elementos utilizando clear e float. HTML5 a CSS3 aula 24 (Abril 2025)
Anonim

o Claro A propriedade CSS faz parte do CSS desde o CSS1. Ele permite que você especifique quais elementos podem flutuar ao lado do elemento limpo e em quais lados. o Claro propriedade tem cinco valores possíveis:

  • Nenhum
  • esquerda
  • certo
  • ambos
  • herdar

Como usar a propriedade clara CSS

A maneira mais comum de usar o Claro propriedade é depois de ter usado um flutuador propriedade em um elemento. Por exemplo:

  • Texto ao lado da minha imagem.
  • Texto abaixo da minha imagem.

Todos os elementos padrão para claro: nenhum;, então se você não quer que outros elementos flutuem ao lado de algo, você deve mudar o Claro estilo.

Quando você está limpando carros alegóricos, você combina sua limpeza com a sua flutuação. Então, se você flutuou o elemento para a esquerda, então você deve limpar para a esquerda. Seu elemento flutuante continuará a flutuar, mas o elemento limpo e tudo depois dele aparecerá abaixo dele na página da web.

Se você tiver elementos flutuantes para a direita e para a esquerda, você pode limpar apenas um lado ou pode limpar ambos.

Usando claro em Layouts

A maneira mais comum pela qual a maioria dos designers usa o Claro a propriedade está no layout dos elementos da página. Você pode ter uma imagem flutuando dentro de um bloco de texto e desejar que o próximo parágrafo comece abaixo da imagem, ou você pode ter uma coluna inteira de texto que deseja flutuar ao lado de outro grupo de texto, com algum texto aparecendo abaixo.

Aqui está o HTML para um layout neste formulário. Tem um contêiner div segurando outro que está flutuando para a esquerda.

Um div flutuante curto

Conteúdo dentro do contêiner div que estará à direita do div flutuante.

Isso funcionará bem, com o div menor flutuando à esquerda do restante do conteúdo do div principal.

Você pode limpar o texto ao lado da caixa flutuante simplesmente adicionando uma tag onde deseja que ela comece a escrever sob a caixa flutuante.

Mas o problema surge quando a caixa flutuante é maior que o conteúdo ao lado dela. Então, como você pode ver, a cor de fundo da caixa principal não é levada até o fundo da caixa flutuante.

Felizmente, há uma maneira fácil de corrigir isso: a propriedade. Ao definir a caixa principal para estouro: auto; a cor do plano de fundo permanecerá ao lado da caixa flutuante mais longa na parte inferior, conforme mostrado neste exemplo.