Le flux, c’est l’ordre d’affichage des éléments. Ainsi, le navigateur parcours votre page HTML, récupère les différents éléments, et les affiche dans un certain ordre. Les éléments sont affichés selon leur ordre d’apparition dans le code source.
Les éléments de type “bloc” vont s’afficher les uns en dessous des autres, alors que des éléments de type “en-ligne” vont s’afficher les uns à la suite des autres.
Exemple :
css commun aux deux type d’affichage
#element1 {
background-color:#00CCFF; /* bleu ciel */
}
#element2 {
background-color:#FF6666; /* rouge */
}
#element3 {
background-color:#6699FF; /* mauve */
}
Affichage de type ‘bloc’ : HTML
<div id="element1">riri</div>
<div id="element2">fifi</div>
<div id="element3">loulou</div>
Affichage de type ‘en-ligne’ : HTML
<span id="element1">pim</span>
<span id="element2">pam</span>
<span id="element3">poum</span>
Voilà pour le flux tel qu’il est normalement interprété. Mais il est possible à l’aide des propriétés css de le modifier. Voyons donc comment...