CSS3 – La notion de flux et les propriétés float et clear

LEÇON

 

La propriété float

Les éléments peuvent être poussés à l’extrémité gauche ou l’extrémité droite de la page (ou du conteneur dans lequel ils se trouvent).

Pour faire ceci on utilise la propriété float. Exemple : .maclasse { float:right; }

Remarques :

  • les éléments sont toujours poussés horizontalement - donc float:top; et float:bottom; n'existent pas !
  • les éléments sont toujours poussés vers les extrémités - donc float:center; n'existe pas !

 

Exemple.

Voici un document HTML et son CSS qui définissent une page avec cinq paragraphes, dont deux affichés à droite (poussés à l'extrémité droite).

 

ex2_sans_div.css

p.box {
  float:right;
  width:150px;
  padding:20px;
  margin:0px 0px 20px 20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

 

ex2_sans_div.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex2_sans_div.css">
    </head>
    <body>
      <p class="box">
        Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis.
      </p>
      <p class="box">
        Mauris ac facilisis libero. Suspendisse congue leo vel hendrerit interdum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna. Morbi sit amet aliquet diam. Curabitur aliquam, tellus eu malesuada dignissim, metus augue porta lacus, nec consectetur ipsum tellus vitae tellus.
      </p>
      <p>
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio. Curabitur semper cursus odio a tristique. Aenean at augue ac quam laoreet vestibulum. Sed posuere augue nec sodales finibus.
      </p>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra. Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget faucibus erat elit nec nulla.
      </p>
    </body>
</html>

 

Affichage sous Chrome :

ex2_sans_div

Remarquer :

  • la règle "float:right;" sur les paragraphes de classe "box"
  • ces paragraphes sont poussés à droite
  • ces paragraphes sont affichés côte-à-côte.

 

Le flux de la page

 

Pourquoi, dans l'exemple ci-dessus, les paragraphes sont-ils affichés côte-à-côte ?

C'est un effet du flux de la page :

  • le navigateur place les éléments du document HTML un par un, dans l'ordre dans lequel il les trouve
  • les éléments sans float sont placés dans le flux, qui suit le sens de l'écriture (de gauche à droite, du haut en bas)
  • la fin d'un paragraphe (</p>) ou un break (<br>) insère tout simplement un retour à la ligne dans le flux
  • les éléments avec float sont placés en dehors du flux et le flux coule autour
  • le flux exploite toute la largeur disponible / les éléments avec float réduisent l'espace disponible
  • un élément avec float est placé à l’extrémité gauche ou droite (selon la règle) de la largeur disponible, mais les éléments déjà "floatés" peuvent être présents et auront leur effet sur le placement du nouveau élément

 

Dans notre exemple donc :

  • le paragraphe "Phasellus mollis, diam ..." est trouvé en premier, et il est poussé vers la droite
  • le paragraphe "Mauris ac facilisis ..." est trouvé en deuxième, et il est poussé vers la droite - mais pas entièrement car il y a déjà le 1e paragraphe - il se trouve à l'extremité droite du flux - à gauche donc du 1e paragraphe.
  • les trois autres paragraphes sont placés dans le flux, qui coule autour les éléments avec float

 

Imaginer maintenant qu'on veut placer les 2 paragraphes spéciaux en colonne - c'est à dire l'un au dessus de l'autre - et toujours à droite sur la page.

Il faudra un div pour grouper les deux paragraphes. Ainsi le div peut être poussé à droite.

Puis à l'intérieure de ce div, on peut placer nos deux paragraphes, dans leur propre flux.

Voici les même fichiers avec les modifications nécessaires :

 

ex2_avec_div.css

div.sidebar {
  float:right;
}

p.box {
  width:150px;
  padding:20px;
  margin:0px 0px 20px 20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

 

ex2_avec_div.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex2_avec_div.css">
    </head>
    <body>
      <div class="sidebar">
        <p class="box">
          Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis.
        </p>
        <p class="box">
          Mauris ac facilisis libero. Suspendisse congue leo vel hendrerit interdum.
        </p>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna. Morbi sit amet aliquet diam. Curabitur aliquam, tellus eu malesuada dignissim, metus augue porta lacus, nec consectetur ipsum tellus vitae tellus.
      </p>
      <p>
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio. Curabitur semper cursus odio a tristique. Aenean at augue ac quam laoreet vestibulum. Sed posuere augue nec sodales finibus.
      </p>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra. Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget faucibus erat elit nec nulla.
      </p>
    </body>
</html>

 

Affichage sous Chrome :

ex2_avec_div

 

Les float emboîtés - ou le flux d'un div

Il n'y a pas que le flux de la page. Chaque section div a son propre flux.

Ce qui veut dire que les éléments qui se trouvent à l'intérieure d'un div et qui ont une règle float ne sont pas "floaté" par rapport au flux de la page principale mais par rapport au flux du div dans lequel ils se trouvent.

Exemple :

 

ex3_nested_float.css

div.sidebar {
  float:right;
}

p.minibox {
  float:left;
  width:250px;
  padding:5px;
  margin:20px 20px 20px 40px;
  background-color:pink;
  border:1px solid red;
  font-size:0.7em;
}

p.box {
  width:550px;
  padding:20px;
  margin:0px 0px 20px 20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

ex3_nested_float.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex3_nested_float.css">
    </head>
    <body>
      <div class="sidebar">
        <p class="minibox">
          Nunc fringilla odio id tortor lacinia, et maximus arcu rutrum.
        </p>
        <p class="box">
          Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis, vel tincidunt tortor ex quis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tincidunt dignissim.
        </p>
        <p class="box">
          Mauris ac facilisis libero. Suspendisse congue leo vel hendrerit interdum. Sed at arcu ex. Donec accumsan risus eget scelerisque rutrum. Nullam euismod erat in sem ornare finibus.
        </p>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna. Morbi sit amet aliquet diam. Curabitur aliquam, tellus eu malesuada dignissim, metus augue porta lacus, nec consectetur ipsum tellus vitae tellus.
      </p>
      <p>
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio. Curabitur semper cursus odio a tristique. Aenean at augue ac quam laoreet vestibulum. Sed posuere augue nec sodales finibus.
      </p>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra. Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget faucibus erat elit nec nulla.
      </p>
    </body>
</html>

 

Affichage sous Chrome :

ex3_nested_float

 

Exemple avec une image :

 

ex4_nested_float.css

.pushright
{
  float:right;
  margin:0px 0px 20px 20px;
}

.pushleft
{
  float:left;
  margin:0 20px 20px 0;
}

.vignette
{
  width:200px;
}
 
.box
{
  width:550px;
  padding:20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

ex4_nested_float.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex4_nested_float.css">
    </head>
    <body>
      <div class="pushright">
        <div class="box">
			<img class="vignette pushleft" src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_pink.jpg">
			<p>
				Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis, vel tincidunt tortor ex quis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tincidunt dignissim.
			</p>
		</div>
        <p class="box">
          Mauris ac facilisis libero. Suspendisse congue leo vel hendrerit interdum. Sed at arcu ex. Donec accumsan risus eget scelerisque rutrum. Nullam euismod erat in sem ornare finibus.
        </p>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna. Morbi sit amet aliquet diam. Curabitur aliquam, tellus eu malesuada dignissim, metus augue porta lacus, nec consectetur ipsum tellus vitae tellus.
      </p>
	  <p>
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio. Curabitur semper cursus odio a tristique. Aenean at augue ac quam laoreet vestibulum. Sed posuere augue nec sodales finibus.
      </p>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra. Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget faucibus erat elit nec nulla.
      </p>
    </body>
</html>

 

La propriété clear

Pour interdire, autour d'un élément, la présence d'autres éléments "floatés", on utilise la propriété clear.

Autrement dit, avec la propriété clear on peut éviter qu'un élément entoure (wrap) un autre qui est "floaté".

Avec clear on peut donc faire une sorte de "grand retour à la ligne".

 

Exemple.

clear1.css

div.sidebar {
  float:right;
}

p.box {
  width:150px;
  padding:20px;
  margin:0px 0px 20px 20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

clear1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="clear1.css">
    </head>
    <body>
      <div class="sidebar">
        <p class="box">
          Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis.
        </p>
        <p class="box">
          Mauris ac facilisis libero. Suspendisse congue leo vel hendrerit interdum.
        </p>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna. Morbi sit amet aliquet diam. Curabitur aliquam, tellus eu malesuada dignissim, metus augue porta lacus, nec consectetur ipsum tellus vitae tellus.
      </p>
      <p>
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio. Curabitur semper cursus odio a tristique. Aenean at augue ac quam laoreet vestibulum. Sed posuere augue nec sodales finibus.
      </p>
      <p style="clear:both;">
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra. Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget faucibus erat elit nec nulla.
      </p>
    </body>
</html>

Affichage sous Chrome :

css_clear_capture_ecran1

Remarques :

  • on aurait pu mettre clear:right; à la place de clear:both; pour atteindre le même but dans cet exemple
  • si on avait mis clear:left; le 3ème paragraphe non-cadré (Fucse in ipsum...) serait affiché comme les 2 autres non-cadrés. C'est à dire, de façon à ce qu'il entoure les paragraphes cadrés qui se trouvent à droite.

 


 

EXERCICES

 

1. Reproduire la page suivante en exploitant la propriété float. Ne pas utiliser la balise div. Faites attention aux marges et padding. Essayer de ne pas répéter des règles dans le fichier CSS (faire du code CSS modulaire).

css_flux_float_clear_exercice1

 

2. Reproduire la page suivante en exploitant la propriété float. Ne pas utiliser la balise div. Faites attention aux marges et padding. Essayer de ne pas répéter des règles dans le fichier CSS (faire du code CSS modulaire).

css_flux_float_clear_exercice2

 

3. (Facultatif) Reproduire la page suivante en exploitant la propriété float. Ne pas utiliser la balise div. Faites attention aux marges et padding. Essayer de ne pas répéter des règles dans le fichier CSS (faire du code CSS modulaire). Astuce : ne pas oublier que float:center; n'existe pas !

css_flux_float_clear_exercice3

 

4. Reproduire la page suivante en exploitant la propriété float et la balise div. Faites attention aux marges et padding. Essayer de ne pas répéter des règles dans le fichier CSS (faire du code CSS modulaire). Essayer de trouver une solution n'utilisant que 2 fois la balise div.

css_flux_float_clear_exercice4

 

5. Reproduire la page suivante en exploitant la propriété float et la balise div. Faites attention aux marges et padding. Essayer de ne pas répéter des règles dans le fichier CSS (faire du code CSS modulaire). Essayer de trouver une solution n'utilisant que 5 fois la balise div.

css_flux_float_clear_exercice5