2
respostas

Posicionamento do <aside> após float: right no vídeo

Olá. No vídeo, o instrutor faz um teste que não está presente no texto.

aside {
    float: right;
}

Ou seja, aplicou o float: right apenas no aside para mostrar o resultado. Ao fazê-lo, a barra de navegação ficou do lado direito da imagem, na mesma altura. No fluxo do HTML, primeiro vem a imagem, depois o barra de navegação, depois o rodapé. A aplicação do float: right no aside não deveria ter feito com que o rodapé subisse a altura do aside e este ficasse à direita do rodapé por cima? No entanto, o que acontece é que o aside é que sobe a altura da imagem e fica posicionada a direita da mesma. Não entendí esse comportamento.

2 respostas

Isto acontece pois você está deixando o aside flutuando a direita e se tiver lugar para ele se encaixar ao lado direito ele vai ficar a direita, para subir o rodapé na altura do aside, vc pode dar um float: left; width: 100%; na imagem e no rodapé da um float:left;

Desculpe, não entendí a explicação. Qualquer elemento, quanto torna-se float, não mantem a sua altura? Quem está abaixo dele é quem sobe. Aprendí isso na explicação. Porque, apenas nesse caso, o aside subiu pra altura do img?? Se eu trocar o img por um outro elemento, por exemplo um quadrado feito com div, isso não ocorre. Ou seja, o aside mantém sua altura, ficando apenas a direita em razão do float: right. Como consequência, o rodapé que está abaixo sobe ficando na altura do aside, como no conceito. Por que apenas quando temos um img acima dele ele sobe pra altura do img???