Refatorando seu conhecimento! Desvendando o comportamento da propriedade Float (CSS).

A propriedade float está desde os primórdios da web e ela é considerada uma das propriedades mais básicas, porem você realmente sabe seu comportamento?

Todos elementos HTML segue um comportamento (inline, block, table, flex, etc…) Porem, float tem um comportamento totalmente diferente entre estas mesmas propriedades conhecidas.

O float foi criado pensando em layouts com o design “text wrap” que explicando em poucas palavras por min, seria como o “estilo em jornal”.

A maioria das vezes quando aprendemos algo básico, sempre aceitamos a teoria básica e com o tempo, revisamos o básico do básico e aprendemos mais coisas novas (é como se fosse a refatoração do seu conhecimento).

Bom foi basicamente que eu fiz e gostaria de compartilhar com vocês! :)

Criei um exemplo bem simples (link do código no github), a qual eu testei alguns comportamentos.

Bom até aí beleza! Com a leitura do artigo “All about float” (a qual eu super recomendo você também ler) está tudo certo!! Então eu cheguei na seguinte conclusão.

“Todos elementos inline vão respeitar o fluxo do elemento float”

Então criei uma div no meio do fluxo de um elemento float para testar os seus vários tipos de comportamento, e verificar se minha teoria está correta.

DISPLAY BLOCK

Beleza por enquanto minha teoria esta certa! O elemento div não flutuo. O que apenas seguiu o fluxo foi o conteúdo dentro, seguindo ainda minha teoria dos elementos inline.

DISPLAY INLINE

Nada a comentar aqui também, teoria ainda funcionando perfeitamente! (OBS: Esse espaçamento enorme na altura é por conta do tamanho da fonte…(Ainda quero estudar mais sobre fontes e também falar sobre seus comportamentos malucos).

DISPLAY INLINE BLOCK

Ééé Bom… Seguindo a lógica, como esse elemento segue o comportamento híbrido, então ele realmente flutuará.

Porem quando há um conteúdo que ultrapassada o fluxo, o comportamento será igual ao block.

DISPLAY FLEX

Ta… por essa eu realmente não esperava, o flex consegue também se adaptar ao fluxo do float!!! Justo ao nome flex ❤

O mais bacana do display flex é que ele sempre respeitará o fluxo do float, não importando com o tamanho do conteúdo dentro do elemento

DISPLAY TABLE

Oi?? O display table também se adapta ao fluxo do float. Tá bom… Está na hora de desistir da minha pequena teoria.

Porém diferente do flex, ele não irá respeitar sempre o fluxo do float.

DISPLAY BLOCK COM UMA LARGURA FIXA, A QUAL NÃO RESPEITA O FLUXO DO FLOAT

Hum… Realmente faz sentido! Pois o conteúdo dentro do elemento sempre deve respeitar as dimensões do elemento pai (Nesse caso, coloquei uma largura fixa de 10% na div) . Neste caso como a largura do elemento é muito menor que o fluxo do float, o conteúdo não vai respeitar mais o mesmo.

OUTROS ELEMENTOS COM LARGURA QUE NÃO RESPEITAM O FLUXO DO FLOAT

Bom como já testamos com exceção do display block e inline (a qual não é possível definir uma largura em elementos inline), os outros formatos vão seguir o fluxo do float. Com uma pequena exceção ao display table a qual não podemos definir uma largura menor que o conteúdo dentro dela.

CONCLUSÃO

Sempre devemos buscar a refatoração do nosso conhecimento. Eu sempre imaginei que dominava totalmente essa propriedade, mas só quando comecei a estudar caso a caso, eu realmente comecei a adquirir conhecimento. Eu não sou um expert nisso (e nunca serei), um grande bom exemplo nos meus testes a qual não consegui entender muito bem o comportamento é com propriedade overflow.

Enfim, uma propriedade que de primeira impressão é bem simples de trabalhar, pode ser mais complexa do que você imagina e como a maravilhosa ciência trabalha, uma teoria cientifica só é comprovada quando analisada e testada por toda comunidade, podemos dizer a mesma coisa com a comunidade open source! Para qualquer assunto, desde o mais simples, até o mais complexo, sempre estude, pratique, questione-se e divulgue!

All about float — https://css-tricks.com/all-about-floats/