Propriedade Float

A propriedade float possibilita que um elemento seja empurrado para direita ou esquerda e os demais elementos fiquem posicionados ao seu redor. Essa propriedade é, muitas vezes, usada para posicionar imagens e é extremamente útil na definição de layouts (você aprenderá a definir layouts na próxima aula).

Quando essa propriedade é usada, o elemento com a propriedade float é posicionado à direita ou à esquerda e o elemento seguinte a ele é (imediatamente) colocado ao seu lado. Os elementos definidos antes de um elemento float não são afetados. Vamos ver um exemplo.

Na Figura 13, há dois exemplos de elementos posicionados com a propriedade float:right;. O primeiro é uma figura e o segundo um parágrafo. Observe que o texto dos parágrafos 1, 2, 4 e 5 adapta-se para circundar a figura e o parágrafo 3.

See the Pen autoria_web_7f13_float by Materiais (@materiais) on CodePen.