Le positionnement flottant peut présenter un débordement problématique que l’on évite facilement en ajoutant un élément doté de la propriété clear, dans le conteneur, sous les flottants.
Le spacer de Newhouse
La méthode du spacer introduite par Mark Newhouse en 2001, consiste à inclure dans le conteneur parent, un bloc au contenu invisible — l’espace insécable —, doté de la propriété CSS clear qui lui interdit d’être adjacent à une boîte flottante.
Concrètement, il suffit d’ajouter le code suivant, avant de fermer chaque bloc qui contient des flottants :
<div style="clear: both;"> </div>Mieux, en déclarant dans une feuille de style externe :
.spacer { clear: both; }on pourra écrire plus légèrement dans la page HTML :
<div class="spacer"> </div>Beaucoup jugent cette méthode grossière est régressive, car elle introduit quantité de blocs vides qui n’ont pas de raison d’être, ce qui n’est pas sans rappeler les pelletées de gif transparents, les fameux spacer.gif, autrefois utilisés pour caler les mises en page à base de table. Comme un retour à la préhistoire... Mais il faut bien reconnaître que c’est une solution aussi efficace que nécessaire.
La ligne invisible
Mieux vaut associer la propriété clear à un contenu réel, tel que la ligne horizontale hr qui, sémantiquement, sert justement à poser une séparation entre deux contenus. La ligne de séparation s’avère très utile pour les utilisateurs de navigateurs qui ne tiendront pas compte de la feuille de style (navigateurs textes, navigateurs périmés…)
, rappelle Laurent Denis. Il est possible de leur en réserver l’affichage, en le supprimant dans les navigateurs qui appliqueront la feuille de style, à l’aide de la propriété
Voici donc :visibility: hidden; : celle-ci rend un élément invisible, tout en le laissant agir sur le flux.
<hr style="clear:both; visibility: hidden;" />Certains vont jusqu’à réserver la ligne de séparation à ce seul usage, en déclarant dans leur feuille de style externe :
hr { clear:both; visibility: hidden; }afin d’écrire très légèrement dans la page HTML :
<hr />Merveilleusement radical, n’est-ce pas ?!
Mais c’est se priver d’utiliser des lignes horizontales par ailleurs.
Le br nettoyeur
Introduit en juillet 2006 dans SPIP 1.9, sous le nom francisé de « nettoyeur » — comme Victor dans le film Nikita de Luc Besson —, cette variante élaborée d’après une idée d’Olivier Gendrin, repose un autre élément HTML, la balise <br />, qui tombe sous le sens, puisqu’elle sert précisément à cela : aller à la ligne.
On déclare ceci dans la feuille de style externe :
.nettoyeur { clear: both; margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px; }Le nettoyeur s’emploie ensuite ainsi dans la page, très simplement :
<br class="nettoyeur" />Cette variante a le mérite d’être très facile à écrire, plutôt élégante, et s’avère à l’usage suffisamment robuste pour que je m’en sépare plus.
Mais c’est aussi une approche plus souple, qui génère parfois un espace en fin de bloc, notamment sous IE6 où ce nettoyeur a une hauteur non nulle, ce qui déplaira aux maniaques de l’utopique calage au pixel près à l’identique sur tous les navigateurs
.
Dans les rares cas où ce nettoyeur n’est pas satisfaisant, il suffira de se rabattre sur un <div style="clear: both;"> comme vu précédemment.
Mon clear tout-terrain
J’ai mixé les méthodes ci-dessus pour former un espaceur de bloc tout-terrain qui sera utilisé sur l’élément le plus pertinent, aussi bien div que hr ou br.
La feuille de style externe contiendra ce qui n’est somme toute qu’un agrégat des trois méthodes précédentes :
.clear { clear: both; }
br.clear { margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px; }
hr.clear { visibility: hidden; }Et l’on écrira dans la page HTML, selon le besoin, avec une préférence pour le premier :
<br class="clear" /><hr class="clear" /><div class="clear"> </div>Ce qui homogénéise les différentes méthodes et permet de les utiliser conjointement sans plus se prendre la tête.
Vos commentaires
1. Le 15 février 2011 à 11:44, par Thomas
En réponse à : Espaceurs de blocs
Bonjour tetue !
Très sympa cette historique sur le rétablissement de flux ! Je crois bien que je n’avais jamais vu une balise <br> avec une classe :)
J’aime beaucoup la solution avec le <hr>. Parce que c’est une balise auto-fermante et que la sémantique me convient bien pour cette utilisation.
Bonne journée,
Thomas.
2. Le 15 février 2011 à 14:49, par Nicolas Hoizey
En réponse à : Espaceurs de blocs
Personnellement, j’aime beaucoup le
<hr />qui ne sert qu’à ça...3. Le 15 février 2011 à 14:56, par Jeremie
En réponse à : Espaceurs de blocs
Une petite remarque en passant, si vous avez la chance de ne pas avoir à vous soucier de IE6 et 7 (ça viendra un jour) il est également possible d’utiliser le pseudo élément :after qui vous évitera d’avoir à rajouter des choses dans votre code HTML.
Et il est aussi possible de résoudre ce « problème » dans IE6 et 7 sans avoir à recourir à un quelconque sur balisage HTML ;-) Il faut tout de même y faire un peu attention car cela reviens à donner le « hasLayout » à un élément, ce qui peut avoir des conséquences... mais globalement, ça marche très bien.
4. Le 15 février 2011 à 17:06, par Thomas
En réponse à : Espaceurs de blocs
Salut Jérémie !
Quand le contexte le permet j’utilise la méthode :
Ça a l’avantage d’avoir le même comportement sur la plupart des navigateurs et de rétablir le flux à l’intérieur du parent sans ajouter de code HTML.
Les conséquences dont tu parles sont surement l’interdiction des débordements. On peut s’attendre à rencontrer des bugs si le parent contient des éléments positionnés : menus déroulants, popin, tooltips, etc.
De temps en temps je suis donc quand même obligé d’utiliser un bloc nettoyeur :)
Bonne soirée,
Thomas.
5. Le 15 février 2011 à 21:21, par Gaga
En réponse à : Espaceurs de blocs
Je suis grand adepte du br class="clear".
Mais j’avoue que l’utilisation de la balise hr (qu’on utilise jamais) est vraiment encore plus simple. Merci !
6. Le 16 février 2011 à 15:31, par Jeremie
En réponse à : Espaceurs de blocs
Salut Thomas
Oui, overflow:hidden est problématique dès que tu as des éléments qui « sortent » du block.
J’ai fait quelques test sur le sujet (là : http://jeremie.patonnier.net/experiences/pseudo-elements/float.html) et, pour moi, la meilleur technique reste le combo :after + zoom qui permet de se passer totalement de nettoyeurs « en dure » dans le code HTML.
7. Le 18 février 2011 à 00:16, par marcimat
En réponse à : Espaceurs de blocs
Ah, merci mille fois @Jeremie. Grâce à ton carré bleu, je viens enfin de comprendre pourquoi
overflow:auto;sur le conteneur n’est pas suffisant !Et du coup de comprendre à quoi servent les
<br class='nettoyeur' />de SPIP :)8. Le 18 février 2011 à 03:07, par Romy Têtue
En réponse à : Espaceurs de blocs
Merci pour vos commentaires éclairés, qui anticipent l’article suivant, dont je hâte donc la publication : ClearFix. Jeremie, puis-je t’y citer ?
Répondre à cet article
Suivre les commentaires :
| 