1. CSS /
INTRODUCTION AU
DÉBORDEMENT DE FLOTTANT
Reprise de l’article d’Alsacréations > http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
2014 - SUTTERLITY
1

2. CSS / DÉBORDEMENT DE FLOTTANT
01
Problématique
Pas de gestion des flottants
Par défaut dans les navigateurs, les éléments positionnés
grâce à la propriété CSS float (aussi appelés flottants) sortent
du flux de leur conteneur.
!
Autrement dit, les flottants «dépassent». C'est ainsi qu'on se
retrouve avec des conteneurs qui font zéro pixel de hauteur, des
pieds de page qui remontent sous le logotype, ou pire encore.
Avec gestion des flottants
#footer
#main
#aside
#main
#aside
#footer
2014 - SUTTERLITY
2

3. CSS / DÉBORDEMENT DE FLOTTANT
Exemple
Voici un exemple de débordement de contenu.
Nous avons ici 3 div avec une classe box positionnées en float à
l’intérieur d’une div avec un identifiant main.
Nous pouvons nous rendre compte que les .box sortent de #main.
#main {
border: 4px solid #666;
}
CSS
!
.box {
width: 33.333%;
float: left;
border: 1px solid #000;
}
Alors que le résultat souhaité aurais du ressembler à ceci :
<div id="main">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
2014 - SUTTERLITY
HTML
3

4. CSS / DÉBORDEMENT DE FLOTTANT
02
Les solutions
Comment bloquer ponctuellement le dépassement des flottants.
!
Il existe plusieurs méthodes.
Voici les principales avec leurs avantages et leurs inconvénients :
!
1. La propriété overflow
2. La propriété clear
3. Utiliser clear sans modifier le code HTML
2014 - SUTTERLITY
4

5. CSS / DÉBORDEMENT DE FLOTTANT
1 - La propriété overflow
Cette propriété a aussi pour caractéristique, lorsqu'on utilise les valeurs autres que visible, de
créer ce qu'on appelle un contexte de formatage de bloc.
!
L’une des propriétés des contextes de formatage de bloc, c'est d'empêcher le dépassement des
flottants. Nous pouvons donc utiliser cette technique.
#main {
overflow: hidden; /* Empêche le débordement des flottants */
}
CSS
Avantage : technique efficace, tient en une ligne.
!
Inconvénient : Lorsqu'on veut faire dépasser certains éléments du conteneur (par exemple un contenu
court ou un élément de décoration), le overflow:hidden est gênant, car il masque tout ce qui dépasse.
2014 - SUTTERLITY
5

6. CSS / DÉBORDEMENT DE FLOTTANT
2 - La propriété clear
La propriété CSS clear permet d'indiquer qu'un élément doit venir se placer
en dessous des éléments flottants qui le précèdent.
!
Voici les valeurs :
Valeurs
Effet
Exemple
none
Valeur par défaut
.toto { clear: none; }
left
L’élément passe en dessous des éléments flottants à gauche
.toto { clear: left; }
right
L’élément passe en dessous des éléments flottants à droite
.toto { clear: rigth; }
both
L’élément passe en dessous de tous les éléments flottants
.toto { clear: both; }
2014 - SUTTERLITY
HTML
6

7. CSS / DÉBORDEMENT DE FLOTTANT
Pour bloquer le dépassement des flottants, on peut placer un
élément vide juste avant la balise fermante du conteneur, et on lui
applique un clear:both;.
!
.clear {
clear: both;
/* Précaution pour IE */
height: 0;
overflow: hidden;
}
Attention, clear n'affecte que les éléments en display:block;, donc on
utilisera de préférence un élément div, ou bien on rajoutera un
display:block; dans les styles CSS.
!
Avantage : technique éprouvée, pas ou peu d'effets indésirables.
!
Inconvénient : il faut ajouter un élément «inutile» dans le code HTML.
2014 - SUTTERLITY
<div id="main">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="clear"></div>
</div>
CSS
HTML
HTML
7

8. CSS / DÉBORDEMENT DE FLOTTANT
3 - Utiliser clear sans modifier le code HTML
Pour finir, voici une variante intéressante de la technique du
clear: both.
!
On peut éviter de rajouter un élément vide dans le code HTML si on
simule cet élément directement en CSS.
!
C'est possible en CSS 2.1 grâce à ce que CSS appelle le «contenu
généré». On utilisera pour ça le pseudo-élément :after.
.clearfix {
*zoom: 1; /* Hack pour IE 6-7 */
}
!
.clearfix:after {
content: "";
display: table;
clear: both;
}
!
Il est préférable d’utiliser une classe afin de ne pas se répéter.
!
Avantage : pas d'élément rajouté dans le HTML.
!
Inconvénient: il faut ajouter une classe à chaque parent de flottant.
2014 - SUTTERLITY
CSS
<div id="main" class="clearfix">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<!-- :after -->
</div>
HTML
HTML
8

9. CSS / DÉBORDEMENT DE FLOTTANT
Les ressources
Contexte de formatage de bloc
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
!
Empêcher les flottants de dépasser de leur conteneur
http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
2014 - SUTTERLITY
9

10. FOLLOW ME /
TWITTER
PORTFOLIO
!
!
@sutterlity
sutterlity.fr
2014 - SUTTERLITY