CSS e o Contexto de Formatação de Bloco (Block Formatting Context)

CSS parece enganosamente simples. Nós apenas declaramos como algo deve aparecer em algumas regras e o navegador faz sua mágica, certo?

Isso resulta em muitos cursos e recursos de aprendizagem que ensinam CSS em uma abordagem prática, fácil de seguir e rápida, baseada em regras de memorização como um robô.

Mesmo alguns dos recursos mais populares são insuficientes quando se trata de ensinar a teoria das folhas de estilo: sites, cursos e recursos diversos praticamente apenas listam as propriedades e valores — e até cursos premium, em geral, apenas se concentram em construir algo rápido sem sequer mencionar alguns dos principais conceitos.

E é exatamente aí que está o problema. Para começar, nós humanos não somos tão bons em memorizar um conjunto de regras gigantescas (e sempre crescentes), mas, também, isso nos leva a pular os conceitos da teoria de CSS, que volta a nos atormentar o tempo todo.

E, na verdade, há algum mérito nisso; a natureza declarativa de CSS faz com que ele aja de formas inesperadas, especialmente para desenvolvedores acostumados a trabalhar com linguagens imperativas e escopos bem definidos.

Há 4 conceitos centrais que, se aprendidos corretamente, poupam 99% dos problemas com CSS:

1. Contexto de Formatação de Bloco (Block Formatting Context)
2. Modelo de Caixa (Box Model)
3. Contexto de Empilhamento (Stacking Context)
4. Cascata (particularmente Especificidade ou Specificity)

Neste artigo, vamos ver mais sobre o primeiro deles, Block Formatting Context (abreviadamente, BFC) e saber como ele pode impactar em layouts CSS e, se bem usado, até ajudar a alcançar determinados resultados.

Contexto de Formatação de Bloco ou Block Formatting Context

O método clássico de layout CSS é o layout de fluxo (flow layout), também conhecido como “fluxo normal”. Considerando as linguagens ocidentais, o layout de bloco, ou block layout, significa simplesmente elementos “inline” (como <span>) fluindo da esquerda para a direita e elementos “block” (como <p>) fluindo um abaixo do outro.

Parece extremamente simples… Até introduzirmos floats e margin-collapsing (colapso de margens).

Quando 2 elementos a nível de bloco são empilhados, suas margens verticais se juntam. Isso faz sentido, por exemplo, em parágrafos em que gostaríamos de ter uma margem de 16px na parte superior e inferior, mas definitivamente não uma margem de 32px entre eles.

Margens “em colapso” — todo mundo na área se refere a isso como collapsing — entre elementos-irmãos parece ser uma decisão razoável e uma que nos poupa um pouco de trabalho para o caso de uso dado. Mas em outros casos, especialmente quando se lida com margens negativas, causa todos os tipos de comportamento estranho/inesperado.

As margens também podem colapsar entre pais e filhos, o que, muitas vezes, não é algo que gostaríamos de ver.

E, como se não bastasse, às vezes fazemos uso de margin collapsing, continuamos com o nosso trabalho e, de repente, “algo” não faz mais colapsar…

Sendo o assunto floats, quando o conteúdo for menor que o próprio float, ele irá “estourar” — todo mundo fala overflow — o elemento que pretendíamos usar como contêiner (ou, em outras palavras, o plano de fundo e a borda do contêiner agora ficam aquém do elemento flutuante). Na maior parte do tempo, classificamos isso com a propriedade clear, geralmente adicionando um elemento extra (pseudo) para injetar um clearfix.

Acontece que, quando se usa contextos de formatação de bloco corretamente, não é preciso passar por esse tipo de problema.

Mas o quê, exatamente, são block formatting contexts?

Um block formatting context, ou contexto de formatação de bloco, define o escopo no qual as margens serão reduzidas e os floats serão contidas. É um “mini layout” no seu layout. Ele contém tudo dentro do elemento que o cria.

Quando criamos um block formatting context, estamos dizendo ao navegador: “trate isso como um layout autônomo em relação a margens e floats”.

Por muito tempo, os BFCs foram criados como um efeito colateral para outras propriedades ou, no pior dos casos, como um efeito colateral acidental de aplicar outras propriedades ou usar alguns elementos HTML.

Quais propriedades e elementos? Muitos deles:

• O elemento-raiz (root)
• Células de tabela, legendas de tabela e qualquer elemento no qual configuramos a exibição para uma parte da tabela (display: table, display: table-cell, display: table-row etc.)
• Elementos inline-block
• Elementos posicionados como absolute e fixed
• Contêineres com várias colunas (elementos com contagem de colunas, extensão de coluna ou largura de coluna diferente de automático, incluindo column-count: 1)
• Grid items e flex items
• Elementos em que o overflow tem qualquer valor que não visible

Existem muitas maneiras de (talvez acidentalmente) criar um novo contexto de formatação de bloco. O mais popular é usando overflow: auto, já que não causa outros problemas — exceto adicionar potencialmente barras de rolagem quando um tamanho específico é adicionado ao elemento e o conteúdo ultrapassa (overflows) esse valor.

A melhor coisa a fazer é usar o que você achar melhor para o caso de uso, mas deixe um comentário dizendo que você está usando essa regra para forçar um novo BFC.

Caso contrário, é muito provável que outros desenvolvedores interpretem erroneamente a regra como se quisessem criar scrollbars ou layout de coluna, ou qualquer outra coisa, e podem até optar por excluí-la — já que column-count: 1 provavelmente não fará sentido para eles.

Veja uma demonstração rápida do que acontece quando se aplica BFCs a diferentes elementos de um layout típico que incluem um float:

See the Pen Block Formatting Context tester by Facundo Corradini (@facundocorradini) on CodePen.

Como você pode ver, aplicar o BFC é realmente útil para evitar que os floats transbordem (overflowing) o container. Também, é ótimo impedir que o texto faça wrapping em torno do float.

Não é incomum pessoas usarem uma margem lateral igual à largura do float para conseguir isso, mas usar a abordagem BFC permite trabalhar com float de largura desconhecida.

Conclusão

Saber como um BFC funciona nos dá muito melhor controle de nossos floats e margens, permite fazer layouts melhores e previne quebras acidentais.

Portanto, use-o de maneira consciente e cuidadosa.

Para mais detalhes, você pode dar uma olhada neste artigo de Rachel Andrew (em inglês).