O float propriedade especifica se ou não um elemento deve flutuar.
A clear propriedade é usada para controlar o comportamento de elementos flutuantes.
A propriedade float
Em seu uso mais simples, o float propriedade pode ser usada para quebrar o texto em torno de imagens.
O exemplo a seguir especifica que uma imagem deve flutuar para a direita em um texto:
A clear Property
A clear propriedade é usada para controlar o comportamento de elementos flutuantes.
Elementos depois de um elemento flutuante irá fluir em torno dele. Para evitar isso, use a clear propriedade.
A clear propriedade especifica em que os lados de um elemento elementos flutuantes não estão autorizados a flutuar:
O clearfix Hack - overflow: auto;
Se um elemento é mais alto do que o elemento que o contém, e é lançada, ele irá transbordar fora do seu recipiente.
Então, podemos adicionar overflow: auto; para o elemento que contém para corrigir esse problema:
Exemplo de layout da Web
É comum para fazer layouts web inteiras usando o float propriedade:
Exemplo
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Tente você mesmo " 
mais Exemplos
Uma imagem com fronteiras e margens que flutua para a direita em um parágrafo
Deixe um flutuador imagem para a direita em um parágrafo. Adicionar borda e margens para a imagem.
Uma imagem com uma legenda que flutua à direita
Deixe uma imagem com uma bóia de legenda para a direita.
Deixe a primeira letra de um parágrafo flutuador à esquerda
Deixe a primeira letra de um parágrafo flutuador à esquerda e estilo da letra.
Criando um menu horizontal
Use flutuador com uma lista de hiperlinks para criar um menu horizontal.
Criando uma página sem tabelas
Use float para criar uma página inicial com um cabeçalho, rodapé conteúdo à esquerda e o conteúdo principal.
Todas as propriedades CSS Float
| Propriedade | Descrição |
|---|---|
| clear | Especifica em quais lados de um elemento onde os elementos flutuantes não são permitidos para flutuar |
| float | Especifica se um elemento deve flutuar |
| overflow | Especifica o que acontece se o conteúdo transborda a caixa de um elemento |
| overflow-x | Especifica o que fazer com os / as bordas esquerda e direita do conteúdo se ele transborda área de conteúdo do elemento |
| overflow-y | Especifica o que fazer com o início / extremidade inferior do conteúdo se ele transborda área de conteúdo do elemento |