Acredito que em 2008, quando comecei na área web e começava a engatinhar no CSS, uma das principais dúvidas era como funcionava o float e o que acontecia com o elemento pai.
A propriedade float, tem como seu valor padrão o none, podendo também receber os valores left e right.
Assim que utilizamos float: left em um elemento, o mesmo será posicionado a esquerda e se o próximo for um elemento inline, o irá acompanhar.
Como funciona com os elementos block e inline?
Nos elementos block, o comportamento é diferente dos elementos inline, como podemos ver abaixo:
{% codepen hemersonvianna OyKQJv 7928 result 257 %}
No exemplo, temos 4 elementos (2 block e 2 inline). Adicionando a propriedade nos primeiros elementos de cada tipo, o segundo elemento block, ignora o primeiro e fica atrás dele, não recohecendo a posição do seu antecessor. Aumentando a largura do segundo elemento, conseguimos vê-lo e um fato curioso é que o texto dentro do elemento, reconhece o primeiro elemento, mas porque a quantidade de caracteres é possível ser mostrada naquele espaço a mais do elemento. Então não se engane, ele não está do lado e sim, atrás.
Já o segundo elemento inline, se encontra ao lado do primeiro. Com a propriedade float, o primeiro elemento reconhece as suas propriedades de dimensão como um elemento block.
Como um elemento se comporta, quando um elemento filho tem a propriedade?
Acima, vimos o comportamento básico dos elementos soltos no body. Abaixo, iremos ver como se comportam os elementos, cujo os filhos tem a propriedade float.
{% codepen hemersonvianna LGPOMg 7928 result 257 %}
Como o exemplo, conseguimos ver que basta um elemento filho não ter a propriedade float, para o elemento pai identificar e respeitar a altura do elemento que não tem o float. Com os elementos 6 e 7, o elemento pai perde a referência e se comporta, como se não tivesse conteúdo. Uma solução para esse comportamento, seria acrescentar as propriedades display: inline-block e width: 100% no elemento pai. Assim, ele ficaria como os demais. Costumo dizer, que o display: inline-block, salva vidas. :) Com isso, terás um elemento com os 2 valores: inline e block. Isso quer dizer, que será um elemento bloco, mas sem quebra de linha (só ficará em 100%, se tiver a propriedade width: 100%). Falaremos mais sobre a propriedade display, em outro artigo.
Quando usar o valores left e right para a propriedade?
Como vimos nos exemplos acima, o float, quebra o fluxo natural do conteúdo. Na maiorida dos casos, não queremos que os próximos elementos sejam influenciados pelos floats na página. Para solucionar esse problema, temos a propriedade clear. Solução muito conhecida por causa do clearfix, que você já deve ter visto em algum projeto ou já tenha utilizado.
{% codepen hemersonvianna VeZXQE 7928 result 440 %}
Temos 4 exemplos, acima. O primeiro se trata de um uso simples, quando temos 2 elementos e queremos que um fique a direita e outro a esquerda. Se invertermos os valores da propriedade float, dos 2 elementos, não teria problema algum. O segundo elemento ficaria a esquerda e o segundo a direita, não necessitando de alguma alteração no html.
No segundo exemplo, podemos ver que dependendo dos valores da propriedade float, podemos fazer muitas variações com as posições dos elementos. No caso, a sequência no html é [1, 2, 3] e com o css ele fica [1, 3, 2]. Assim, podendo ajudar muito na hora de criar mais de um template, sem ter que modificar o html.
No terceiro, já conseguimos ver a utilização da propriedade 'clear'. Se o elemento 4, não tivesse a propriedade float ou clear, naturalemnte ele ficaria atrás do elemento 1. Acrescentando nele a propriedade float, com o valor left, ele ficaria ao lado do elemento 3 e com o valor right, ficaria entre os elementos 5 e 2. E para quebrar esses comportamentos, podemos acrescentar a propriedade clear, com o valor both, para quebrar qualquer valor do float ou sendo especifico com o valor do elemento anterior. Se o elemento 3, tem o float: left, seria necessário o clear: left, no elemento 4. Assim, agora ele se encontra na próxima linha, abaixo do elemento 2. Os elementos posteriores irão respeitar essa quebra de linha.
No último, só fica mais um exemplo da lógica da mistura dos elementos com as propriedades float e clear.
Conclusão
Tendo em mente como funciona a propriedade float e seu comportamento no documento HTML, fica mais fácil planejar estruturas que na maioria das vezes, não terão impacto no HTML, facilitando a manutenção. E também é importante entender como outras propriedades podem auxiliar. Como foi mostrado nesse artigo, sobre as propriedades display e clear. Portanto, usem com sabedoria e evitará muitas dores de cabeça na questão de estrutura e comportamento no documento HTML.
