Fweb06 Css Float Clear

CSS
Propriedades Float e Clear

Propriedade Float
•

O uso correto desta propriedade facilita muito a manutenção de um design quase único e coerente para computadores desktop, notebooks e smartphones.

•

Faz o objeto flutuar à esquerda (left) ou à direita (direita) do próximo elemento.

•

No entanto, é uma propriedade meio imprevisível no CSS.

•

Ao usar float, sempre especifique a largura (width).

•

A largura pode ser especificada como % do elemento pai.

•

Elemento pai é aquele que contém um ou mais elementos float (normalmente um <div>).

Propriedade Float
•

Por exemplo, se quisermos o menu à esquerda e o conteúdo à direita, fazemos o seguinte: #menu { float:left; width:30%; }
#conteudo { float: right; width: 60%; }

Propriedade Float
•

É possível criar uma página inteira apenas com elementos ‘float’ e com o
‘width’ especificado.

•

Quando dois elementos ‘float=left’ concorrem numa mesma linha, o primeiro elemento fica mais a esquerda e o segundo elemento fica no lado direito do primeiro.

•

Caso o segundo elemento não caiba na linha, ele automaticamente fica ajustado à esquerda da próxima linha.

•

Portanto, o conteúdo fica auto-ajustável para qualquer tamanho de tela, inclusive dispositivos móveis.

Propriedade Float
•

A propriedade ‘width’ de dentro do ‘float’ quando especificado em ‘%’ é relativo ao elemento ‘pai’ e não a área total da tela.

•

Entretanto, o elemento ‘float’ só altera o tamanho do elemento no qual ele está contido (elemento pai) quando o elemento pai também tem ‘float’ especificado.

•

Quando o elemento pai não tem ‘float’ definido, os elementos floats que este contém pode ultrapassar os limites do elemento pai. Esse efeito é conhecido como
‘collapse’.

Propriedade Float
•

Quando este efeito não for desejado, temos duas maneiras para resolver:
1.Atribuir ‘float’ e ‘width’ para o elemento pai:

Esta solução pode levar a uma mudança em cascata que levará o seu site ficar totalmente com float;

2.Especificar um ‘overflow: