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: <i>float</i>.

É 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 <i>pic</i>, e dizemos: <i>float</i>.

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.

<i>Margin</i>.

Vamos adicionar um 
pouco de "<i>margin: direita</i>"

e "<i>margin: baixo</i>" 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 "<i>#hopper-links</i>",

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 
"<i>div</i>", temos que dar uma largura.

Caso o contrário, "<i>div</i>" 
tentará tomar todo o espaço,

e nada poderá envolver em torno dele.

Parece que isso também precisa 
de um pouco de "<i>margin: esquerda</i>".

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 "<i>clear</i>",

e colocar "<i>clear:both</i>".

Poderíamos usar 
"<i>clear:left</i>" ou "<i>clear:right</i>"

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 "<i>clear:both</i>".

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]