Como o "clear" altera algo q vem depois ?

Oi.

Outra definição para o clear é que ele não aceita elementos que tenham o float especificado. Então no caso clear: left na classe .titulo-principal significa que qualquer tag com essa classe não irá aceitar "compartilhar espaço" com elementos que possuam float: left.

Para a index da Barbearia Alura, a lógica então seria: tem uma imagem na <section class="principal"> com o float: left, o que irá fazer com que toda estrutura após a imagem se encaixe ao redor da imagem. Seguindo pelo código HTML, haverá o <h3 class="titulo-principal">Benefícios</h3>. Como ele possui a classe titulo-principal, o efeito do float: left deixa de ser usado.

Se mais para frente no código fosse decidido que seria inserida uma nova imagem com a flutuação para a esquerda, esse efeito voltaria a ser usado após essa imagem, até ser encontrada alguma classe titulo-principal que o cancelasse novamente.