Propriedade float

A propriedade float - define blocos flutuantes que serão contornados por texto. A propriedade float às vezes é usada em conjunto com a propriedade clear, que remove o fluxo ao redor do elemento.

Embora float tenha sido originalmente criado para inserir blocos de fluxo em texto, atualmente é usado de forma muito ampla e não padronizada para criar layouts.

Sintaxe

seletor {
	float: left | right | none;
}

seletor {
	clear: both | left | right | none;
}

Valores para float

Valor	Descrição
`left`	O bloco flutuará à esquerda e o texto fluirá à sua direita.
`right`	O bloco flutuará à direita e o texto fluirá à sua esquerda.
`none`	Não há fluxo.

Valor padrão: none.

Valores para clear

Valor	Descrição
`left`	Remove o fluxo à esquerda.
`right`	Remove o fluxo à direita.
`both`	Remove o fluxo tanto à esquerda quanto à direita.
`none`	Não remove o fluxo.

Valor padrão: none.

Exemplo

Vamos usar float de maneira não padronizada, colocando os itens da lista em linha:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

Veja também

a propriedade clear,
que remove o float para elementos superiores