Eu cheguei nesse exercício eu realmente dei uma travada, se alguém puder me esclarecer melhor a propriedade float e clear. Outra pergunta é, podemos declarar a propriedade clear sem a propriedade float?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu cheguei nesse exercício eu realmente dei uma travada, se alguém puder me esclarecer melhor a propriedade float e clear. Outra pergunta é, podemos declarar a propriedade clear sem a propriedade float?
Vinicius, boa noite!
Fiz um pequeno exemplo: http://codepen.io/adrianowead/pen/EWGMVp
Um bloco está sem o elemento com o clear, e o outro possui.
A relação entre float e clear é bem simples, o float faz o elementos flutuarem em uma direção.
Mas em algum momento, você pode precisar interromper isso, se uma lista de elementos está com float.
Neste ponto, você pode adicionar outro elemento com a o clear, para bloquear isso.
Ou adicionar a propriedade em algum elemento já existente.
No meu exemplo, o caso de uso com um terceiro elemento, é o uso do span.
Nos demais exemplos, o objeto "filha2" recebe classes diferentes para ter o mesmo comportamento.
O clear "quebra" a sequência de floats.
Veja que usei "clear: both" e "clear: left", ou seja, quebrando em ambos os lados "both" ou apenas elementos flutuando a esquerda "left"
O "clear: right", segue a mesma ideia, mas com elementos que estejam flutuando para a direita "float: right"
Normalmente, o "clear: both" resolve o problema.
Note que para o "clear" ter efeito, o elemento precisa ser do tipo "block level", como é o caso nativo de uma div.
Como eu usei um span, ele é "inline level", sendo assim, precisei no css declarar que ele também será block, usando o "display: block".
Depois procure sobre elementos de block level e inline level, entender isso ajuda muito a criar um css.