Porque não foi preciso usar:
img {
clear:right;
}
como foi mencionado no vídeo para que o aside fique abaixo da imagem?
Porque não foi preciso usar:
img {
clear:right;
}
como foi mencionado no vídeo para que o aside fique abaixo da imagem?
Acredito que seja uma prevenção, caso você coloque mais conteúdo no futuro, assim evita bagunçar
Não sei se é essa a dúvida, mas vamos lá. A regra é "quase sempre" válida: Se você usou float, muito provavelmente vai precisar usar clear. Clear não é para o elemento que flutua, e sim para o próximo elemento na ordem do documento. Assim, qualquer conteúdo subsequente a um elemento flutuante irá contorná-lo até que este use a propriedade clear. Pegando a resposta de uma das questões para melhor compreensão: "Ela não é mais necessária (clear: right). Quando estávamos testando a colocação da foto e o menu um abaixo do outro, precisávamos usar a declaração clear: right pois não havia mais nenhum elemento flutuando naquela região. Agora, como temos o elemento flutuando à esquerda e consumindo todo o espaço à esquerda da foto, a barra de navegação desce naturalmente, sem a necessidade da declaração clear: right."
Obs: no vídeo o clear: right;
é realizado no aside, não na imagem.
Jacqueline, pense o seguinte:
Neste caso nem ASIDE
nem FOTO
possuem valor clear: right;
.
Lembre-se que na marcação HTML a imagem vem antes do aside, portanto como ambos possuem float: right;
, a preferência de ir mais pra direita é do que vem antes na marcação HTML, no caso a foto vai ficar mais a direita.
No exemplo abaixo o MAIN
possui width: 40%
.
| MAIN | |ASIDE| |FOTO|
Vamos aumentar a largura do MAIN
para que se encaixe com a FOTO
e o ASIDE
, vamos deixá-lo como 85%, lembre-se que tanto o ASIDE
quanto a FOTO
têm largura 15% cada um, já que queremos estes empilhados, formariam uma barra só com 15% e juntando com o MAIN
preencheriam a página.
O que aconteceria:
| MAIN ||FOTO|
| MAIN ||ASIDE|
O valentão do MAIN
esmagou os caras da direita, eles (FOTO
e ASIDE
) são muito grandes pra caberem juntos naquele espaço, mas lembre-se que na marcação HTML a FOTO
vem antes, portanto ela tem preferência por aquele espaço mais a direita. Como estavam sem espaço no beliche o ASIDE
tem menos preferência por ficar na direita, então ele pulou pra cama debaixo mesmo sem precisar estar limpando a FOTO
, afinal, ele foi obrigado, não teve opção. Que mundo injusto!
Mas e se meu chefe de repente dissesse: "agora cansei do main ocupando esse espaço, ele deve ocupar 50%"
| MAIN | |ASIDE|| FOTO|
| MAIN |
Novamente o ASIDE
insistente como só ele, quer ficar agarradinho com a FOTO
. Ou seja, seu projeto bagunçaria.
Por isso se o ASIDE
tiver o atributo clear: right
ele limparia o conteúdo à direita e pularia pra cama debaixo. Humor à parte, espero que tenha compreendido :)