19 lines
1.6 KiB
Plaintext
19 lines
1.6 KiB
Plaintext
---
|
|
title: 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](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
|