Contexte de formatage de blocs

Un contexte de formatage de blocs (block formatting context) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.

Un contexte de formatage de blocs est créé dans les situations suivantes :

• L'élément racine ou quelque chose qui le contient
• Les éléments flottants (éléments avec une valeur pour la propriété float autre que none)
• Les éléments avec une position absolue (éléments avec la propriété position à absolute ou fixed)
• Les blocs en ligne (éléments avec la propriété display à inline-block)
• Les cellules de tableau (éléments avec display: table-cell, ce qui est le défaut pour les cellules de tableau)
• Les titres de tableau (éléments avec display: table-caption, ce qui est le défaut pour <caption>)
• Les éléments où overflow a une valeur autre que visible
• Les boîtes flexibles (éléments avec display: flex ou inline-flex)
• display: flow-root

Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.

Les contextes de formatage de blocs sont important pour le positionnement (voir float et clear). Les règles de positionnement et de "libération" des blocs flottants (par clear) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et clear ne libère que des blocs flottants dans le même contexte de formatage de blocs.