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
nemrelative
. - O valor de
display
étable-cell
,table-caption
,inline-block
,flex
, orinline-flex
,grid
, orinline-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.