Descrever o contexto de formatação de bloco (BFC) e como ele funciona.

Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual do CSS em uma página da web, no qual os blocos são organizados. Elementos flutuantes, posicionados absolutamente, inline-blocks, table-cells, table-captions e elementos com overflow diferente de visible (exceto quando esse valor foi propagado para a área visível) estabelecem novos contextos de formatação de bloco.

Saber estabelecer um contexto de formatação de blocos é importante, porque sem fazer isso, a caixa de contenção não conterá filhos floated. Isso é semelhante ao colapso das margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.

Um BFC é uma caixa HTML que atende pelo menos uma das seguintes condições:

• O valor de float não é none.
• O valor de posição não é static nem relative.
• O valor de display é table-cell, table-caption, inline-block, flex, or inline-flex, grid, or inline-grid.
• O valor de float não é none.

Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (para formatação da direita para a esquerda, as bordas direitas se tocam).

As margens verticais entre caixas adjacentes de nível de bloco em um BFC colapsam. Leia mais em margens de recolhimento.

Exercícios