Explications quant aux contextes de formatage

Ce guide évoque souvent les « contextes de formatage de bloc et contextes de formatage en ligne » et décrit le comportement des éléments dans ces contextes. Dans ce guide, nous verrons ce que sont ces contextes et comment les utiliser.

Le contexte de formatage

Chaque objet d'une page fait partie d'un « contexte de formatage », c'est-à-dire une zone dans laquelle le contenu s'organise d'une façon précise. Un contexte de formatage de bloc organisera ainsi ses éléments enfants selon la disposition en bloc ; un contexte de formatage flexible organisera ses éléments enfants comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques sur la disposition et le comportement de ses enfants.

Le contexte de formatage de bloc

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

Créer un nouveau contexte de formatage de bloc

L'élément html n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ou le dégagement ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

  • Pour les éléments flottants
  • Pour les éléments positionnés de façon absolue (y compris avec position: fixed et position: sticky)
  • Pour les éléments avec display: inline-block
  • Pour les cellules de tableau ou pour les éléments avec display: table-cell, y compris pour les cellules de tableau anonymes créées avec les propriétés display: table-*
  • Les légendes de tableau ou les éléments avec display: table-caption
  • Les éléments de blocs pour lesquels overflow a une valeur différente de visible
  • display: flow-root
  • Les éléments avec contain: layoutcontent ou strict
  • Les élément flexibles
  • Les éléments de grille
  • Les conteneurs multi-colonnes
  • Les éléments avec column-span: all

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

Utiliser display: flow-root

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

Ainsi, en utilisant display: flow-root; sur l'élément div, tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

Un contexte de formatage en ligne

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments strong, a ou span, entre autres, sont utilisés sur du texte.

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

Les autres contexte de formatage

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

Résumé

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,