CSS /

2014 - SUTTERLITY

INTRODUCTION AU

�1

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

2014 - SUTTERLITY

01 Problématique 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.

�2

CSS / DÉBORDEMENT DE FLOTTANT

#footer

#main #aside

Pas de gestion des flottants

#footer

#main #aside

Avec gestion des flottants

2014 - SUTTERLITY

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.

�3

CSS / DÉBORDEMENT DE FLOTTANT

<div id="main"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

HTML

#main { border: 4px solid #666; } !.box { width: 33.333%; float: left; border: 1px solid #000; }

CSS

Alors que le résultat souhaité aurais du ressembler à ceci :

2014 - SUTTERLITY

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

�4

CSS / DÉBORDEMENT DE FLOTTANT

2014 - SUTTERLITY

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.

�5

CSS / DÉBORDEMENT DE FLOTTANT

#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

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 :

�6

CSS / DÉBORDEMENT DE FLOTTANT

HTML

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

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;. !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.

�7

CSS / DÉBORDEMENT DE FLOTTANT

HTML<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>

HTML

.clear { clear: both; /* Précaution pour IE */ height: 0; overflow: hidden; }

CSS

2014 - SUTTERLITY

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. !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.

�8

CSS / DÉBORDEMENT DE FLOTTANT

HTML<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

.clearfix { *zoom: 1; /* Hack pour IE 6-7 */ } !.clearfix:after { content: ""; display: table; clear: both; }

CSS

2014 - SUTTERLITY

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

�9

CSS / DÉBORDEMENT DE FLOTTANT

2014 - SUTTERLITY

PORTFOLIO !

sutterlity.fr

FOLLOW ME /

TWITTER !

@sutterlity