Photo by Ankush Minda on Unsplash

Posicionamento de elementos na tela com CSS: float e respiros.

Ensinar é aprender duas vezes

Joseph Joubert

Bem… antes de iniciar o artigo é necessário deixar claro que tudo o que será escrito nas linhas abaixo será um relato pessoal de forma simples e coerente à minha atual experiência e conhecimento , portanto deverá ter uma linguagem de fácil acesso e conteúdo esquematizado e “mastigado”. Vamos lá!

Para entendermos melhor o que é o float e suas particularidades é necessário responder as três perguntas abaixo.

1. O que é o float? A tradução literal da palavra significa “flutuar”, ou seja, o float faz com que o elemento “flutue” no html.
2. Pra quê ele serve? O float ajuda a montarmos nossos layouts, permitindo que elementos flutuem para os lados.
3. Quais os comportamentos do float? O float possui muitas peculiaridades, portanto vamos no ater nessa pergunta por um tempinho.

> > Comportamentos do float:

• Ao ser aplicado no elemento X esse elemento vai para frente, numa nova camada (novo contexto) que é criada à frente da antiga, diferente da camada que ele estava antes do float. Logo, os outros elementos que estão na camada antiga ficam com espaço sobrando e acabam subindo para ocupar esse espaço.
• NUNCA o float esconderá um conteúdo (texto, parágrafo, etc)
• O elemento antes de aplicar o float ocupava inteiramente a largura do pai, depois de aplicado o float o tamanho dele passa a ser o tamanho do conteúdo dele.
• O elemento pai ignora a altura do elemento com a propriedade float e respeita a altura dos demais elementos. Isso ocorre devido ao novo contexto que foi criado, o pai dele passa a somente enxergar apenas o contexto do browser e não o do float; o pai não consegue ver o elemento flutuando no novo contexto e admite que ele não está no contexto do browser. Nesse caso é preciso dizer para o elemento pai considerar a altura do elemento com o float para fazer isso é preciso fazer com que o pai recalcule o contexto (para que assim ele passe a enxergar os filhos) para isso se usa a propriedade overflow: hidden
• a propriedade overflow: hidden é usada para esconder um elemento e deve ser aplicada no elemento pai. Caso você defina uma altura ou largura menor/maior do que a do elemento pai ele será escondido, ou seja qualquer elemento que vaze o tamanho do pai é escondido.

Esquema utilizando float: left no h1 e float: right no nav, e depois overflow:hidden para voltar ao contexto.

Respiros internos e externos

Nem sempre trabalhar com pixel é o indicado, daí você pode trabalhar com os respiros.

• Respiro para fora do elemento = respiro externo = margin
• Respiro para dentro do elemento = respiro interno = padding

Quando usar o padding? Quando usar o margin?