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]