CSS: float

(Elivelto Ebermam)

 

A propriedade float define como os elementos irão flutuar na tela. Basicamente são utilizados dois valores: left e right. Quando o valor é left, o elemento irá flutuar a esquerda, e quando o valor é right, flutuará a direita. Existem outros dois valores: none e inherit. O valor none é o valor padrão, e diz que o elemento não flutuará. Já no valor inherit, o elemento usará o mesmo valor do que seu elemento ancestral (em que ele está contido).

 

float left

Quando o valor de float é left, o elemento flutuará a esquerda. Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKBHDQ7982GO

 

No exemplo há uma div vermelha e um parágrafo. Note que, com a propriedade float tendo o valor left, a div ocupa o espaço a esquerda e o parágrafo é distribuído ao redor dela.

 

float right

Quando o valor de float é right, o elemento flutuará a direita. Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GKBHL25XNB5N

 

Mudando o valor de float para right, a div passa a se posicionar a direita. Dessa forma irá sobrar espaço a esquerda, e então o conteúdo do parágrafo ocupará ele.