Fundamentos do BFC

O Contexto de Formatação de Bloco (Block Formatting Context, ou BFC) representa um mecanismo fundamental de renderização no CSS. Segundo as especificações da W3C, determinados elementos geram automaticamente um novo BFC: elementos com float, posicionamento absoluto, contenedores de bloco que não sejam caixas de nível de bloco (como inline-block, table-cell, table-caption), além de elementos com overflow diferente de visible.

O BFC opera como um ambiente de layout autônomo, onde a disposição dos elementos permanece isolada de fatores externos. Dentro desse contexto, caixas de bloco e caixas de linha alinham-se verticalmente conforme as bordas do elemento pai.

Comportamento com Elementos Flutuantes

Para ilustrar o funcionamento, observe uma estrutura com imagem flutuante e conteúdo textual:

<!-- estrutura html -->
<section class="envoltorio">
  <aside class="destaque">Elemento com float</aside>
  <p>Texto contido no elemento pai.</p>
</section>

/* estilos css */
.envoltorio {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.destaque {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;
  width: 200px;
  margin: 0 20px 0 0;
}

Quando o conteúdo textual é extenso, ele envolve naturalmente o elemento flutuante. Porém, com texto reduzido, a borda do contêiner pode colapsar, posicionando-se abaixo do elemento flutuante, já que este foi removido do fluxo normal do documento.

Esse fenômeno ocorre porque, ao aplicar float, a largura da caixa de texto se mantém, mas as linhas de texto são comprimidas para ceder espaço ao elemento flutuante. Assim, background e borda acabam aparecendo por trás do elemento.

Estratégias de Resolução

Duas abordagens comuns resolvem essa questão:

1. Técnica clearfix: insere um elemento após o conteúdo com clear: both
2. Propriedade overflow: valor diferente de visible

.envoltorio {
  overflow: auto;
}

A propriedade overflow com valor distinto de visible gera um BFC, cuja característica principal é conter elementos flutuantes.

BFC como Micro Layout

O BFC funciona como um layout independente dentro da página. Uma vez estabelecido, ele engloba todo o conteúdo, incluindo elementos flutuantes que deixam de extrapolar os limites do contêiner.

Prevenção de Colapso de Margens

O colapso de margens é um comportamento frequente e pouco compreendido. Analise o caso:

<div class="caixa">
  <p>Primeiro parágrafo com margens verticais de 20px</p>
  <p>Segundo parágrafo com margens verticais de 20px</p>
</div>

.caixa {
  background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

Sem intervenção, as margens do parágrafo colapsam com as do contêiner, eliminando o espaçamento visual esperado. O fundo cinza não é perceptível nas extremidades.

As regras de colapso seguem:

• Duas margens positivas: prevalece o valor maior
• Duas margens negativas: prevalece o maior valor absoluto
• Margens de sinais opostos: resultado da soma algébrica

Condicionante essencial: as margens devem ser adjacentes.

Ao transformar o contêiner em BFC, as margens internas são contidas:

.caixa {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

Bloqueio de Envoltura por Elementos Flutuantes

Em layouts baseados em colunas com float, o BFC impede que um elemento envolva outro flutuante:

<div class="envoltorio">
  <div class="flutuante">Elemento flutuante</div>
  <div class="conteudo">Texto descritivo</div>
</div>

Aplicando BFC ao elemento de conteúdo:

.conteudo {
  overflow: auto;
}

Essa técnica fundamenta layouts de múltiplas colunas. Como cada coluna flutuante gera seu próprio BFC, colunas adjacentes não se sobrepoem, mesmo com alturas distintas.

Aplicação em Layouts Multi-coluna

Em cenários de múltiplas colunas, arredondamentos de navegador podem causar quebra de layout, fazendo a última coluna descer de linha. A criação de BFC na coluna final resolve essa instabilidade:

<div class="recipiente">
    <div class="coluna">coluna 1</div>
    <div class="coluna">coluna 2</div>
    <div class="coluna">coluna 3</div>
</div>

.coluna {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}

.coluna:last-child {
  float: none;
  overflow: hidden;
}

A coluna final, agora com BFC, ocupa o espaço remanecsente após as colunas anteriores. Embora Flexbox e Grid ofereçam soluções mais robustas para layouts multi-coluna, essa abordagem demonstra o comportamento do BFC e pode servir como estratégia de fallback.

Propriedades que Geram BFC

Além de overflow, diverass propriedades CSS estabelecem um Contexto de Formatação de Bloco:

• float com valor diferante de none
• position com valor absolute ou fixed
• display como inline-block, table-cell, flex, table-caption ou inline-flex
• overflow distinto de visible

A Evolução: display: flow-root

Métodos tradicionais de criação de BFC apresentam limitações. Propriedades como overflow possuem finalidade específica, e seu uso forçado pode introduzir efeitos colaterais indesejados — barras de rolagem inesperadas ou recorte de conteúdo. Além disso, a intenção do desenvolvedor torna-se obscura para quem mantém o código.

O CSS introduziu display: flow-root como solução dedicada, livre de efeitos colaterais:

.componente {
  display: flow-root;
}

Essa propriedade cria um BFC puro, contendo flutuantes, evitando colapso de margens e bloqueando envoltura de elementos flutuantes sem compromissos visuais.

O suporte navegacional está em expansão. Para aplicações que demandam compatibilidade ampla, overflow: hidden ou auto permanecem como alternativas viáveis, embora menos elegantes.

Considerações Finais

A compreensão do BFC é essencial para dominar a construção de layouts CSS. Esse conhecimento acelera significamente o desenvolvimento e a depuração de interfaces, permitindo soluções elegantes mesmo em navegadores com capacidades limitadas, onde técnicas modernas como Flexbox e Grid podem não estar disponíveis.