Aula 10 - Exercício 7

entendo da mesma forma que você... o primeiro deveria também ter o float left.

Durante a primeira atividade do capítulo (o vídeo), o instrutor enfatiza várias vezes que o clear, independente de ser left, right ou both, empurra o próprio elemento para baixo dos floats que estiverem ao lado especificado na propriedade. Porém, o elemento só é empurrado para baixo de floats que estejam acima dele no código HTML. (Faltou explicarem direito no curso mesmo.)

Nesse código que você mostrou, o clear: both; não faz diferença nenhuma, você poderia simplesmente ignorá-lo, afinal, a <div> que tem a class ".primeiro" é a que vem primeiro no código HTML. Não tem ninguém acima dela.

Resumindo, ao usar o clear, o elemento só será empurrado para baixo de outros elementos que estejam a cima dele no código HTML.

Faça o teste com esse código CSS. Coloquei todas as caixas para flutuarem à esquerda e depois coloquei um clear: both; na caixa 3. Você verá que a propriedade clear: both; realmente não funciona da forma como foi ensinada e se encaixará perfeitamente na minha teoria:

div {
    width: 100px;
    height: 100px;
    /* 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;
}
.primeiro {
    background-color: red;
    float: left;
}
.segundo {
    background-color: blue;
    float: left;
}
.terceiro {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: green;
    float: left;
    clear: both;
}
.quarto {
    background-color: orange;
    float: left;
}
.quinto {
    background-color: magenta;
    float: left;
}

Para você não precisar ir lá no exercício vou deixar o link do site de teste aqui: Dabblet.

Observe que a caixa 3 só ficou abaixo das caixas 1 e 2 que estão acima da caixa 3 no código HTML.