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?
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.