Auteur: Jérôme Forget. Publié le 25 mars 2007.
Ce qu'on appelle le flux normal d'une page Web, c'est la manière dont sont rendus les éléments par le navigateur en l'absence de feuille de style, ou lorsqu'aucun positionnement particulier n'a été appliqué aux éléments. En bref, on peut dire que le flux normal correspond à l'ordre dans lequel les éléments sont placés dans le document HTML. Ce concept est important et dicte la façon dont sont disposés les éléments dans une page.
Dans le flux normal d'un document, les éléments se placent naturellement de gauche à droite, du haut vers le bas. Dépendant du type d'élément (élément de bloc ou élément en ligne), les éléments sont placés dans le flux normal en respectant ces deux principes :
Dans un contexte de mise en forme d'éléments de bloc, les boîtes sont placées l'une après l'autre, verticalement, en commençant en haut du bloc conteneur. Les propriétés de marge régissent la distance verticale entre deux blocs successifs. Les boîtes occupent toute la largeur disponible dans leur conteneur.
Dans un contexte de mise en forme d'éléments en ligne, les boîtes sont placées horizontalement, l'une après l'autre, en commençant en haut du bloc conteneur, avec retour à la ligne quand il n'y a plus de place dans le bloc conteneur. Ainsi, un paragraphe consiste en un empilement vertical de boîtes de ligne. Ces boîtes de ligne s'empilent les unes sur les autres, sans séparation entre elles, et elles ne se chevauchent jamais.
Afin de positionner des éléments dans le flux normal, il suffit de définir les marges de chaque élément pour le placer dans son conteneur. En donnant aux éléments des dimensions spécifiques et des marges extérieures ou intérieures, il sera possible de placer un élément à l'intérieur de son bloc conteneur.
Cette méthode de positionnement, sans doute la plus simple, convient à la majorité des cas de positionnement. C'est la technique à utiliser pour les éléments de contenu d'un page : textes, titres, images, etc. Le flux normal est souple et permet la création de pages fluides qui s'affiche convenablement sur tous les écrans et supports.