7.2 Le flux

18 octobre 2018

Le comportement par défaut d’une page Web

Un document HTML est un document vivant.
Même sans application de CSS, un document HTML a déjà ses propres règles :

fluidité : comment le contenu s’adapte aux dimensions du navigateur
Ordre/Organisation : dans quel ordre les éléments apparaissent
empilement : comment les éléments apparaissent les uns sur les autres

Ce comportement naturel est logique.

Fluidité

En HTML, le contenu est roi.

Tous les éléments block sont fluides. Ils adapteront naturellement leur mise en page pour s’adapter à leur contenu intérieur :

width: 100%
un bloc prendra toute la largeur disponible
word wrap
Si le contenu en ligne d’un bloc ne tient pas sur une seule ligne, il continuera sur une nouvelle ligne.
height: auto
la hauteur d’un bloc varie automatiquement pour correspondre à la taille de son contenu

Un élément de bloc remplira toute la largeur disponible, tandis que sa hauteur variera automatiquement en fonction de la taille de son contenu.
Cet élément sera poussé vers le bas en fonction de la hauteur de ses prédécesseurs.

Un bloc est par défaut en pleine largeur
Sa hauteur est la hauteur de son contenu

Ordre/Organisation

HTML elements are displayed in the order in which they are written in the code. First in the code -> first in the browser.

Each block appears in the order in which they appear in the HTML code, from top to bottom.

Les éléments HTML sont affichés dans l’ordre dans lequel ils sont écrits dans le code. Premier dans le code -> Premier dans le navigateur.

Chaque bloc apparaît dans l’ordre dans lequel il apparaît dans le code HTML, de haut en bas.

<p>Premier</p>
<p>Second</p>
<p>Troisième</p>
<p>Quatrième</p>
<p>Cinquième</p>

Empilement

Un navigateur a 3 dimensions.

Chaque élément HTML appartient à une couche/un calque imaginaire.

L’ordre des piles dépend de la manière dont les éléments sont imbriqués : les éléments enfants apparaissent au-dessus de leurs parents respectifs.

Chaque élément imbriqué apparaît au-dessus de son parent.
Plus la hiérarchie est profonde, plus la pile est haute.

<div>
  This parent is behind
  <p>
    This nested child appears <strong>on top</strong> of its parent
  </p>
</div>

This parent is behindThis nested child appears on top of its parent

Briser le flux

Bien que le comportement par défaut du navigateur soit efficace, il peut ne pas être suffisant pour vos besoins de conception.

Plusieurs propriétés CSS permettent de perturber le flux:

height et width peuvent altérer la « fluidité » d’un élément
float perturbe le comportement d’un élément ainsi que son environnement
position absolute et fixed peuvent extraire un élément du flux
z-index peut modifier l’ordre dans lequel les éléments sont empilés