Flux et Positionnement flottant

 

Exemple
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Le texte contourne l'image, l'image est sortie du flux courant : on dit que cette image est flottante gauche

Entrons dans le vif du Sujet

I Le flux normal

Syntaxe CSS
Si une page est visualisée sans CSS, les éléments apparaissent dans l'ordre des balises dans le code HTML. C'est le « flux courant » aussi appelé « flux normal »

Les images de l'exemple suivant prennent place dans le flux normal comme des mots.

Exemple
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. "

ne s'hérite pas CSS1 iemzchromeoperasafari
II Flottant

Syntaxe CSS
La propriété float permet de sortir un élément du flux de la page, l'élément est alors contourné par le flux courant des éléments qui le suivent. Cette propriété peut prendre une des trois valeurs suivantes :
  • left,
  • rigth,
  • none
Exemple

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " In vehicula, diam vel suscipit hendrerit, est metus sodales mi, eu feugiat elit orci quis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus elementum magna, eu convallis erat euismod vel. Etiam arcu est, rutrum a commodo sed, eleifend in sapien

Règle CSS
Un flottant chevauche les boîtes non flottantes en étant contourné par leur contenu.
Exemple
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " In vehicula, diam vel suscipit hendrerit, est metus sodales mi, eu feugiat elit
orci quis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus elementum magna, eu convallis erat euismod vel. Etiam arcu est, rutrum a commodo sed, eleifend in sapien

On peut alors obtenir un multicolonnage en par exemple mettant des marges aux boîtes non flottantes

Exemple

 

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " In vehicula, diam vel suscipit hendrerit, est metus sodales mi, eu feugiat elit
orci quis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus elementum magna, eu convallis erat euismod vel. Etiam arcu est, rutrum a commodo sed, eleifend in sapien

ne s'hérite pas CSS1 iemzchromeoperasafari
III Clear

clear permet de nettoyer les flottants.
Règle CSS

clear="left", l'élément est positionné en-dessous de tout élément « flottant » gauche.

clear="both", l'élément est positionné en-dessous de tout élément « flottant » sur sa gauche ou sa droite.

Cette propriété peut prendre les valeurs none (la valeur par défaut), left, right ou both.

Cette propriété est par exemple utilisée pour les pieds de page.

Références

http://www.alsacreations.com/article/lire/533-positionnement-elements-css.html

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Questions immédiates :

  1. Qu'est-ce-que le flux normal ?
  2. Un flottant gauche est-il contourné par le flux normal des éléments qui le suivent dans le code html ou bien qui le précèdent ?
  3. même question pour un flottant droit ?
  4. Dans les schémas suivants, A et B sont flottants respectivement gauche et droit. Indiquez sur chacun des schémas si l'élément C est :
    1. clear: rigth,
    2. clear: left,
    3. clear: both,
    4. clear: none

        Plusieurs réponses sont possibles.

                                             

  5. Pour créer un multicolonnage à 2 colonnes avec un flottant gauche A, que doit-on rajouter à l'élément non flottant D ci-dessous ?