0:00:00.552,0:00:02.407
Estou criando uma [br]página para o Hopper,

0:00:02.407,0:00:04.554
um dos nossos "avatars"[br]aqui no Khan Academy.

0:00:04.554,0:00:09.813
Ela tem uma imagem, alguns [br]links legais e um parágrafo.

0:00:11.034,0:00:15.893
Acho que essa imagem do Hopper [br]ficaria melhor ao lado do parágrafo,

0:00:15.893,0:00:19.846
então irei recortar e colar aqui embaixo.

0:00:21.324,0:00:24.002
Isso não ficou tão bom quanto[br]eu esperava que ficasse.

0:00:24.002,0:00:26.356
O texto começa em baixo da imagem.

0:00:26.369,0:00:29.170
Eu esperava que o texto[br]ficasse envolta da imagem,

0:00:29.170,0:00:31.113
como em um jornal ou uma revista.

0:00:31.641,0:00:34.701
Iremos precisar de uma nova [br]propriedade do CSS para isso: <i>float</i>.

0:00:34.701,0:00:38.178
É uma maneira de flutuar dentro ou[br]ao redor de outros elementos,

0:00:38.178,0:00:40.579
e é perfeito para envolver [br]a imagem com o texto.

0:00:40.854,0:00:45.368
Então nós vamos em cima para [br]nossa regra <i>pic</i>, e dizemos: <i>float</i>.

0:00:45.368,0:00:48.555
Para o valor, precisamos decidir se[br]queremos que a imagem flutue

0:00:48.555,0:00:50.693
para o lado esquerdo [br]ou para o lado direito.

0:00:51.060,0:00:53.012
Vamos tentar para a esquerda.

0:00:53.012,0:00:55.169
Ótimo. Perfeito.

0:00:56.559,0:00:57.788
Não tão perfeito,

0:00:57.788,0:01:01.101
porque o texto está muito perto da imagem.

0:01:01.101,0:01:02.974
Lembra qual propriedade devemos usar

0:01:02.974,0:01:05.429
para separar o texto da imagem?

0:01:05.429,0:01:08.255
É parte do modelo caixa, [br]o qual nós acabamos de aprender.

0:01:08.255,0:01:09.548
<i>Margin</i>.

0:01:09.548,0:01:11.935
Vamos adicionar um [br]pouco de "<i>margin: direita</i>"

0:01:11.935,0:01:14.161
e "<i>margin: baixo</i>" a essa imagem.

0:01:14.161,0:01:15.998
para dar um espaço para isso respirar.

0:01:20.908,0:01:22.721
Está muito melhor.

0:01:23.471,0:01:26.410
Nós também podemos flutuar [br]elementos que não são imagens.

0:01:27.000,0:01:29.898
Como, por exemplo, se quiséssemos[br]uma barra lateral.

0:01:29.898,0:01:31.488
E essa lista de links?

0:01:31.488,0:01:35.774
Podemos pegar essa [br]lista e flutuar para a direita.

0:01:35.774,0:01:38.927
Então vamos adicionar uma [br]regra para "<i>#hopper-links</i>",

0:01:38.927,0:01:41.178
e flutuar isto para a direita.

0:01:41.613,0:01:44.735
Está flutuando, mas ele [br]está ocupando muita largura,

0:01:44.735,0:01:47.127
mais do que eu esperava.

0:01:47.241,0:01:51.251
vamos restringir a largura para 30%

0:01:52.406,0:01:55.854
então isso sempre irá tomar 30% da página,

0:01:55.854,0:01:59.070
e o resto da página irá completar[br]o resto com os 70%.

0:01:59.070,0:02:02.701
Geralmente, sempre que flutuamos um [br]"<i>div</i>", temos que dar uma largura.

0:02:02.701,0:02:05.419
Caso o contrário, "<i>div</i>" [br]tentará tomar todo o espaço,

0:02:05.419,0:02:07.671
e nada poderá envolver em torno dele.

0:02:07.671,0:02:11.671
Parece que isso também precisa [br]de um pouco de "<i>margin: esquerda</i>".

0:02:12.611,0:02:13.564
Pronto.

0:02:14.706,0:02:19.066
Agora, note que o rodapé na parte inferior[br]da informação de contato para Hopper.

0:02:19.066,0:02:22.735
Ele está fazendo essa coisa [br]estranha, sobrepondo a barra lateral.

0:02:22.735,0:02:24.459
E isso é porque está "envolvendo".

0:02:24.459,0:02:26.389
Não queremos que o nosso rodapé envolva, [br]

0:02:26.389,0:02:29.193
porém, queremos que sempre esteja na parte[br]de baixo de tudo,

0:02:29.193,0:02:30.828
porque é um rodapé.

0:02:30.997,0:02:34.318
Para fazer com que não envolva, [br]podemos usar a propriedade "<i>clear</i>",

0:02:34.318,0:02:36.511
e colocar "<i>clear:both</i>".

0:02:38.801,0:02:40.945
Poderíamos usar [br]"<i>clear:left</i>" ou "<i>clear:right</i>"

0:02:40.945,0:02:42.871
se apenas não quiséssemos que envolvesse

0:02:42.871,0:02:45.150
elementos flutuantes da direita[br]ou da esquerda.

0:02:45.150,0:02:48.168
Normalmente não queremos [br]que envolva nenhum elemento flutuante,

0:02:48.168,0:02:50.157
então dizemos "<i>clear:both</i>".

0:02:50.486,0:02:52.751
Isso está começando a [br]parecer uma página real.

0:02:52.751,0:02:55.481
Temos a área principal,[br]a barra lateral, o rodapé.

0:02:55.481,0:02:58.594
Na verdade, agora você [br]sabe as propriedades do CSS

0:02:58.594,0:03:00.928
que a maioria dos layouts [br]que as páginas possuem.

0:03:00.968,0:03:04.790
Ponha junto alguns divs com largura, float[br]altura, preenchimento, margem e clear,

0:03:04.790,0:03:07.789
e todos os tipos de layouts para páginas[br]ao seu alcance.

0:03:07.789,0:03:09.000
Traduzido por [Gabriel Mello Fernandes][br]Revisado por [Fernando dos Reis]