Porque não foi preciso usar:
img {
clear:right;
}como foi mencionado no vídeo para que o aside fique abaixo da imagem?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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 :)