0

Elementos Flutuantes

cssElementos Flutuantes

A propriedade float é aplicada a tag <img> do HTML. Dois valores podem ser aplicados: Left e Right. Ela é usada por causa de sua característica singular de poder colocar o conteúdo ao seu redor,sendo possível adicionar margin e padding.

Exemplo:

img04

  • CSS

  • HTML

Mas a propriedade float não se limita às imagens, podendo ser aplicada a qualquer elemento. Como em uma <div>, por exemplo:

img05

  • CSS

  •  HTML

Tome cuidado quanto ao tamanho do objeto que você vai usar o float, pois se ele for maior do que a área do conteúdo os elementos irão para baixo uns dos outros e não para o lado como no exemplo anterior.

img06

Exemplificação de Float com imagens maiores do que o campo visual

A Propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padrão, o elemento subseqüente a um float, ocupa o espaço livre ao lado do elemento flutuado. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se por exemplo clear for definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Para evitar que o texto se posicione no espaço livre deixado pela imagem faremos da seguinte forma:

img07

  • CSS

  •  HTML

Z-index

O z-index é simplesmente a ordem em que os elementos podem ser apresentados no documento.

img08

  • CSS

 

Paulo R. Marinho

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

− 3 = 2