CSS: Elementos flutuantes

Estou criando uma
página para o Hopper,

um dos nossos "avatars"
aqui no Khan Academy.

Ela tem uma imagem, alguns
links legais e um parágrafo.

Acho que essa imagem do Hopper
ficaria melhor ao lado do parágrafo,

então irei recortar e colar aqui embaixo.

Isso não ficou tão bom quanto
eu esperava que ficasse.

O texto começa em baixo da imagem.

Eu esperava que o texto
ficasse envolta da imagem,

como em um jornal ou uma revista.

Iremos precisar de uma nova
propriedade do CSS para isso: float.

É uma maneira de flutuar dentro ou
ao redor de outros elementos,

e é perfeito para envolver
a imagem com o texto.

Então nós vamos em cima para
nossa regra pic, e dizemos: float.

Para o valor, precisamos decidir se
queremos que a imagem flutue

para o lado esquerdo
ou para o lado direito.

Vamos tentar para a esquerda.

Ótimo. Perfeito.

Não tão perfeito,

porque o texto está muito perto da imagem.

Lembra qual propriedade devemos usar

para separar o texto da imagem?

É parte do modelo caixa,
o qual nós acabamos de aprender.

Margin.

Vamos adicionar um
pouco de "margin: direita"

e "margin: baixo" a essa imagem.

para dar um espaço para isso respirar.

Está muito melhor.

Nós também podemos flutuar
elementos que não são imagens.

Como, por exemplo, se quiséssemos
uma barra lateral.

E essa lista de links?

Podemos pegar essa
lista e flutuar para a direita.

Então vamos adicionar uma
regra para "#hopper-links",

e flutuar isto para a direita.

Está flutuando, mas ele
está ocupando muita largura,

mais do que eu esperava.

vamos restringir a largura para 30%

então isso sempre irá tomar 30% da página,

e o resto da página irá completar
o resto com os 70%.

Geralmente, sempre que flutuamos um
"div", temos que dar uma largura.

Caso o contrário, "div"
tentará tomar todo o espaço,

e nada poderá envolver em torno dele.

Parece que isso também precisa
de um pouco de "margin: esquerda".

Pronto.

Agora, note que o rodapé na parte inferior
da informação de contato para Hopper.

Ele está fazendo essa coisa
estranha, sobrepondo a barra lateral.

E isso é porque está "envolvendo".

Não queremos que o nosso rodapé envolva,

porém, queremos que sempre esteja na parte
de baixo de tudo,

porque é um rodapé.

Para fazer com que não envolva,
podemos usar a propriedade "clear",

e colocar "clear:both".

Poderíamos usar
"clear:left" ou "clear:right"

se apenas não quiséssemos que envolvesse

elementos flutuantes da direita
ou da esquerda.

Normalmente não queremos
que envolva nenhum elemento flutuante,

então dizemos "clear:both".

Isso está começando a
parecer uma página real.

Temos a área principal,
a barra lateral, o rodapé.

Na verdade, agora você
sabe as propriedades do CSS

que a maioria dos layouts
que as páginas possuem.

Ponha junto alguns divs com largura, float
altura, preenchimento, margem e clear,

e todos os tipos de layouts para páginas
ao seu alcance.

Traduzido por [Gabriel Mello Fernandes]
Revisado por [Fernando dos Reis]