Elementos flutuantes em CSS

A propriedade float permite que um elemento flutue na página à esquerda ou à direita. Neste post veja elementos flutuantes em CSS.

Se aplicarmos essa propriedade em um box, ele será deslocado para a direita ou para a esquerda do documento e o box seguinte ocupará seu espaço:

Exemplo: um texto precisa ser posicionado em volta de uma figura. Para isso, basta flutuarmos a imagem.

No HTML, construiremos uma div para a imagem.

Já no CSS, para conseguir o efeito visualizado logo abaixo, basta definir uma largura para a div que contém a imagem e declarar o seguinte código:

<div id="imagem">
  <img src="imagem.jpg" alt="Imagem">
</div>

#imagem {float: left; width: 100px;}

A propriedade Float só poderá ser declarada de três formas: right (direita), left (esquerda) ou none (nenhuma).

A propriedade Clear é um complemento da propriedade Float. É utilizada para controlar o comportamento dos elementos que seguem os elementos com Float na página.

O elemento subsequente a um Float ocupa o espaço livre ao lado do elemento flutuante. Com isso, a propriedade Clear assume os valores left, right, both ou none.

Então, se Clear for definido como both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuantes que estejam antes dele no código.

Por exemplo, para evitar que o texto se posicione no espaço livre deixado pela imagem, basta adicionar o código em CSS:

p { clear: both; }

Dimensão em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css

Seu computador está lento, travando ou dando tela azul? E toda vez que isso acontece você precisa gastar dinheiro com assistência técnica?

A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.

Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.

Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: