Débordement de flottant CSS

168 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
168
Sur SlideShare
0
Issues des intégrations
0
Intégrations
89
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Débordement de flottant CSS

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 10. FOLLOW ME / TWITTER PORTFOLIO ! ! @sutterlity sutterlity.fr 2014 - SUTTERLITY

×