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 :)