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

cssseletor {
  float: left | right | none;
}

cssseletor {
  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:

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

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

Результат:

Veja também

a propriedade clear,
que remove o float para elementos superiores