---
title: Contexte de formatage de blocs
slug: Web/Guide/CSS/Block_formatting_context
tags:
  - CSS
  - Reference
  - Web
translation_of: Web/Guide/CSS/Block_formatting_context
original_slug: Web/CSS/Block_formatting_context
---
<div>{{CSSRef}}</div>

<p>Un <strong>contexte de formatage de blocs</strong> (<em>block formatting context</em>) 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.</p>

<p>Un contexte de formatage de blocs est créé dans les situations suivantes :</p>

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

<p>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.</p>

<p>Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("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 {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.</p>

<h2 id="Spécifications">Spécifications</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
</ul>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("float")}}</li>
 <li>{{cssxref("clear")}}</li>
 <li>{{cssxref("display")}}</li>
</ul>