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 | elementos flutuantes

O SEU COMPUTADOR ESTÁ TRAVANDO, DANDO "TELA AZUL" E DOR DE CABEÇA?

Aprenda a consertar o próprio computador como um profissional!

Especialize-se em manutenção preventiva e corretiva, diagnósticos de defeitos e upgrades com aulas passo a passo sem enrolação.

Torne-se também um técnico diferenciado e conquiste o emprego dos seus sonhos com este curso completo de Montagem e Manutenção de Desktops e Notebooks.

Clique na imagem abaixo e confira mais detalhes do curso:

CLIQUE AQUI E SAIBA MAIS