# CSS e o Contexto de Formatação de Bloco (Block Formatting Context) > Entenda Block Formatting Context (BFC) em CSS profundamente: como controlar floats, margin collapsing e criar layouts mais previsíveis e eficientes. Domine! URL: https://dpw.dev/css/css-contexto-de-formatacao-de-bloco-block-formatting-context/ Publicado em: 2019-08-19 Categoria: css Tags: layout Autor: Tárcio Zemel > Artigo baseado em [The only reason your CSS fails](https://blog.logrocket.com/the-only-reason-your-css-fails-8e4388d562af/). 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 ``) fluindo da esquerda para a direita e elementos "block" (como `

`) 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.

![Comparativo entre textos com margens collapsed e non-collapsed.](/images/blog/css-contexto-de-formatacao-de-bloco-block-formatting-context/css-margin-collapsed-non-collapsed.webp)
CSS `margin` collapsing vs. non-collapsing
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... > **Dica:** Para explicações mais completas, leia nosso artigo "[CSS float: considerações, dicas e macetes para bons layouts na web](/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/)". 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**.
![Comparativo de texto/imagem com float normal, com overflow e clearfix.](/images/blog/css-contexto-de-formatacao-de-bloco-block-formatting-context/css-float-clear-clearfix.webp)
Comparativo de texto/imagem com float normal, com overflow e 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". > **Dica:** Em breve, poderemos dizer "Podemos criar um, definindo `display: flow-root` no elemento que contém", mas, por enquanto, [não há amplo suporte para isso](https://caniuse.com/#feat=flow-root). 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](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/) (em inglês). --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml