CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Elementos flutuantes

Por Benedito Silva Júnior - publicado em 13/07/2016


A propriedade float permite que um elemento flutue na página à esquerda ou à direita.

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.
Elemento flutuante

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>
Elemento flutuante

Código CSS:

#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; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo