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

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?

Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.

Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.

Você pode usar esse conhecimento para:

✔ 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

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.

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