Résumé
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é
floatautre quenone) - Les éléments avec une position absolue (éléments avec la propriété
positionàabsoluteoufixed) - 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ù
overflowa une valeur autre quevisible - Les boîtes flexibles (éléments avec
display: flexouinline-flex)
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.