Contexte de formatage de bloc - noelno/dovelei GitHub Wiki

Vocabulaire

En HTML4 on a deux catégories d'éléments : les éléments de niveau inline (éléments pouvant apparaître dans un flux de texte, par exemple <b>, <i>, <img>...) et les éléments de niveau block.

En CSS2 on a des modes de rendu qui pour la plupart peuvent être regroupés dans deux catégories : les rendus block et assimilés, et les rendus inline et assimilés. Ces modes de rendus peuvent créer un contexte de formatage, dans lequel les éléments enfants viennent s'inscrire d'une façon un peu différente qu'en l'absence de contexte.

Un contexte de formatage bloc se caractérise par certains comportements, appliqués à ses enfants :

  • les éléments enfants flottants n'en débordent plus, même sans clearfix
  • placé à coté d'un élément frère flottant, il s'affiche à côté sans s'écouler
  • plus de fusion des marges avec un élément frère ou parent

Avant HTML5 il était courant de faire le raccourci suivant :

Eléments “block” (block level) => rendu de type block => contexte de formatage block
Eléments “inline” (inline level) => rendu de type inline => contexte de formatage inline

Mais c'était uniquement vrai par défaut, tant que l'on ne modifiait pas les valeurs des propriétés display, float, position et overflow ciblant ces éléments.

Aujourd'hui en HTML5 le modèle "Elements blocs" et "Elements inline" n'est plus appliqué (cf. Organisation des éléments), ce qui évite désormais la confusion niveau et mode de rendu, et s'inscrit dans le principe de la séparation du contenu (HTML) et de la présentation (CSS).

Générer un contexte de formatage bloc

Ce type de contexte est crée par une ou plusieurs des valeurs suivantes sur le bloc parent :

float: left ou float: right
position : absolute
position : fixed (ajouté dans les specs CSS3)
display : inline-block
display : table-cell
display : table-caption
display : table (indirectement via création d’un élément anonyme table-cell)
overflow : hidden
overflow : scroll
overflow : auto

(pour l'instant on ignorera flex puisque pas encore étudié)

Selon la propriété choisie il y aura quelques petites différences de comportement :

display : inline-block => le bloc suivant le bloc flottant prend la largeur de son contenu et se place soit en-dessous, soit à côté du flottant selon la place restante.
Quand il y a beaucoup de contenu, il n'est pas nécessaire de fixer la largeur du bloc suivant.

display : table-cell => comme inline-block, sauf que si vous spécifiez une largeur plus grande que l'espace disponible, le bloc ne sortira pas du cadre contrairement à inline-block. (il est limité à la largeur de l'élément anonyme table, cf. Mode de rendus CSS.)

display : table-caption => le bloc suivant le bloc flottant prend la largeur la plus réduite possible et se place soit en dessous, soit à côté du flottant selon la place restante. Préciser une largeur.

display : table => comme inline-block

overflow : hidden ou auto => le bloc suivant le flottant se place à côté et prend la place restante en largeur

Démo : http://codepen.io/raphaelgoetter/full/bFqfI/

##Sources

⚠️ **GitHub.com Fallback** ⚠️