3
respostas

Não foi necessário usar clear:right para a imagem

Porque não foi preciso usar:

img {
    clear:right;
}

como foi mencionado no vídeo para que o aside fique abaixo da imagem?

3 respostas

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