Testes com float - 8

Ola Jhosef,

Aqui houve o mesmo caso:

.quarto {
    background-color: orange;
    float: right;
}
.quinto {
    background-color: magenta;
    float: left;
}

De forma geral, talvez fosse necessário usar da propriedade right nos 2 elementos, mas nesse caso especifico, por causa do tamanho e da disposição dos outros elementos, não a mudança no layout!

Neste nosso exercício especificamente não faz diferença, entretanto existe uma diferença sim.

Quando eu digo que a caixa 4 deve flutuar à direita, ela vai pro máximo à direita possível.

Caso eu diga que a caixa 5 deve flutuar à direita, como ela está após a caixa 4 na marcação HTML, a caixa 4 tem preferência por ficar o mais à direita possível, portanto a caixa 5 ficaria à esquerda da caixa 4, mas colada o máximo à direita da caixa 4.

Já se eu disser que a caixa 4 deve flutuar à direita, e a caixa 5 deve flutuar à esquerda, cada um fica no seu canto. Imagine que as caixas são menores, então a caixa 4 ficaria colada na "parede" à esquerda e a caixa 4 ficaria colada na caixa 3 à direita, sobrando um espaço no meio.

Já se a caixa 5 flutuar à direita, mesmo sendo menor, vai ficar colada na caixa 4 e vai sobrar um espaço à esquerda.

Para exemplificar salvei este dabblet.

Como exercício mude o atributo float da classe .quinto para right.