float right

Oi Bruno, ele vai pra direita sim, permitindo que os outros itens subam e fiquem a esquerda dele. Porém, como os outros elementos acima não permitem elementos flutuando a esquerda, ele se mantêm na mesma linha, porém, a direita.

Deu pra entender?

Olá Wanderson obrigado pela resposta, então descobri o pq não tinha entendido, eu achei que estava sendo usado todo o espaço em branco, depois que prestei atenção no código vi que tinha um container com o width de 400px, que é o tamanho exato do desenho montado, como não tinha prestado atenção no código estava esperando que um float right iria deixar a caixa 3 no canto superior direito.

Wanderson aproveitando a sua boa vontade poderia me tirar uma duvida referente ao exercício 8, nesse exercício eles dão como resposta que é necessário colocar o quadrado 4 e 5 como float right, para poder trocar as posições, só que se deixar apenas o 4 como float rigth e o 5 como float left chegará no mesmo resultado, isso afeta o resultado final?

Caso o resultado final tenha sido o mesmo da figura, então tudo bem Bruno. A beleza da programação as vezes está em conseguir resolver um problema de diversas formas diferentes. Pode haver muita variação.

Se encontrou uma segunda forma de fazer, tudo bem, ótimo!

Muito bom e prático o exercício!

div {
    /* Para deixar o texto centralizado na div,
       podemos colocar um line-height igual à altura
       dela. Só funciona bem se o texto tiver uma
       linha só.
    */
    line-height: 100px;
    text-align: center;
    font-size: 25px;
}
.container {
    width: 400px;
    border: 2px solid;
    height: 200px;

}
.primeiro {
    background-color: red;
    float: left;
    width: 100px;
    height: 100pX;
}    

.segundo {
    background-color: blue;
    float: left;
    width: 100px;
    height: 100px;
}
.terceiro {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: green;
    float: right;
}
.quarto {
    background-color: orange;
    width: 100px;
    float: left;
    clear: left;
}
.quinto {
    background-color: magenta;
    width: 100px;
    height: 100px;
    float: left;
}