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???

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software