Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Dans le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux après en avoir sorti des éléments en les faisant flotter à gauche ou à droite. J’utilise généralement hr avec le traditionnel clear: both et visibility: hidden et je jongle ensuite avec les marges ou la hauteur pour espacer les éléments. Or, depuis que j’utilise le reset.css d’Eric Meyer, j’ai tendance à supprimer les marges de tout ce qui bouge, mais cette chère règle horizontale reste récalcitrante à la remise à zéro cross browser

Un HR cross-browser cachère

Il existe heureusement des solutions pour palier les insuffisances du dernier de la classe. L’une d’entre elles repose sur l’application d’un margin-top et margin-bottom négatif :

hr { height: 1px; margin: -0.5em 0; padding: 0; color: #F00; background-color: #F00; border: 0; }

J’ajoute à celà les propriétés clear: both et visibility: hidden, je mets la hauteur à zéro et je supprime les couleurs pour obtenir un spacer de bon aloi. Les valeurs de margin ne convenant pas dans mon cas, j’ai tâtonné pour trouver une valeur satisfaisante :

hr {
     height: 0;
     margin: -1.2ex 0;
     padding: 0;
     border: 0;
     clear: both;
     visibility: hidden;
 }
Une autre solution trouvée cette fois sur ultra-fluide transforme le hr en bloc pour mieux maitriser son comportement dans le but de créer une ligne rouge horizontale de 1 pixel d’épaisseur sans marge :
hr {
     display:  block;
     height: 1px;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     color: #F00;
     background-color: #F00;
     border: 0;
 }
Pour mes besoins, j’applique la recette précédente :
hr {
     display: block;
     height: 0;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     border: 0;
     visibility: hidden;
 }
Il y a bien ce _margin qui peut être gênant, mais il reste toujours la possibilité de le caser dans une feuille de style dédiée à IE avec les commentaires conditionnels.

La différence avec la méthode précédente est qu’une fois transformé en block (l’auteur de l’astuce ayant habilement déterminé que le hr se comportait par certains côtés comme un élément en ligne) le margin: 0 suffit à supprimer les marges pour les navigateurs modernes. le _margin: -7px 0 s’adressant plus spécifiquement à IE6. Reste à savoir comment se comporte IE7 dans les mêmes circonstances.

Deux, c’est trop

Ces deux techniques fonctionnent assez bien pour donner le même rendu aux traits horizontaux ou pour rétablir le flux. Malheureusement pour moi, j’ai deux blocs imbriqués contenant des float: left et float: right, ce qui implique deux hr l’un en dessous de l’autre :

             </div><!-- end .pix -->
             <hr class="spacer" />
         </div><!-- end .contents -->
         <hr class="spacer" />
     </div><!-- end #container --> </body>
Ces deux hr successifs m’ennuient (un peu) car en l’absence de prise en charge des feuilles de style, je me retrouve avec deux vilains traits de séparation. Et puis, si je me suis mis à utiliser le reset.css, c’est pour éviter au maximum d’utiliser des CSS spécifiques à certains navigateurs, alors, bon…

Je tiens à préciser que j’utilise généralement clear: both sur le blocs eux-mêmes au lieu de créer un spacer superflu. Mais curieusement, les blocs en question se retrouvaient sous les colonnes latérales… la technique utilisée pour créer les colonnes latérales reposant également sur la propriété float, j’ai le sentiment qu’au bout d’un moment on se retrouve dans la situation où il devient interdit d’interdire à un bloc d’avoir des voisins à droite ou à gauche : les spacers indépendants deviennent indispensables.

C’était mieux avant ?

Avant d’utiliser les hr pour rétablir le flux, j’utilisais une <div class= »spacer »></div> qui fonctionnait furieusement bien malgré l’absence de sémantique associée :x

Styler la balise BR

J’ai essayé d’utiliser la balise br en lui associant un clear: both. Tout a l’air de fonctionner, mais si le flux est bien rétabli sous Firefox, IE6 ne passe pas le test de la bordure : elle n’encadre pas l’ensemble de la div comme si un clear: both n’avait pas d’effet sur un br

C’est dommage parce que lorsqu’il s’agit simplement de rétablir le flux et non de créer une séparation entre deux contenus, cette balise br aurait presque été sémantique : un retour à la ligne… Que demander de mieux (oué, que ça fonctionne sous IE6, je sais…) ?

Je garde cette solution sous le coude pour tests complémentaires. En attendant, j’ai trouvé sur dimension-internet un gabarit utilisant la balise br pour rétablir le flux :

br.clearfloat {
     clear: both;
     height: 0;
     font-size: 1px;
     line-height: 0px;
 }

La rustine

En désespoir de cause, je me suis résolu à utiliser <div class= »spacer »></div> lorsqu’il s’agit seulement de rétablir le flux, et <div class= »spacer »><hr /></div> lorsque j’ai besoin de séparer aussi des contenus :

.spacer {
     clear: both;
 }
.spacer hr {
     display: none;
 }
Ce n’est pas super CHIC, mais au moins la feuille de style est allégée et ne nécessite ni hacks ni commentaires conditionnels. Si j’utilise souvent ces derniers, ça m’ennuie de les mettre en place pour une ou deux déclarations seulement. Bien évidemment, j’utilise et je recommande fortement l’usage du hr pour rétablir le flux lorsqu’un espacement est souhaité entre deux blocs, ou mieux encore, l’application du clear: both sur les blocs eux-mêmes.

Quelques mots sur la remise à zéro des éléments HTML

Au cours de mes recherche sur hr, je suis tombé sur une intervention de Florent V. qui fait part de ses réserves quant à l’utilisation d’une remise à zéro des éléments. L’utilisation d’un reset présente selon lui deux écueils. D’une part, il serait facile d’oublier de styler une balise et d’autre part, il ne serait pas souhaitable de vouloir tout maîtriser : un peu de lâcher prise serait bienvenue.

Si je partage cette dernière opinion, je ne suis pas totalement d’accord avec la première : les balises HTML ne sont pas en nombre infini, et au pire, en cas d’oubli, il est facile de palier le problème. Pour ma part, en complément de reset.css, j’utilise un fichier html.css pour donner un nouveau style « par défaut » aux éléments HTML.

Ce fichier est similaire à la partie /* basics / de l’exemple fourni par david larlet de biologeek. Notons que la partie / reset */ de ce fichier ne reprend qu’une partie du reset.css d’Eric Meyer.

Faire reset, c’est rigolo tout le temps ?

Il y a évidemment des cas où l’utilisation d’un reset est à prendre avec des pincettes : lorsque vous intervenez sur une partie d’une page déjà construite, ou dans une moindre mesure, lorsque d’autres personnes sont susceptibles d’intervenir. Je ne conseillerais pas non plus l’utilisation de la remise à zéro dans le cadre d’une formation : si vous commencez l’étude des CSS, il vaut peut-être mieux connaître les bases avant de faire table rase ;)

En guise de conclusion

En tout état de cause, si la théorie nous dicte la bonne conduite à tenir, force est de constater que la pratique nous joue parfois des tours de cochons ^_^

Mise à jour du 28/02/08 : la deuxième partie intitulée Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire vient de sortir.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



20 commentaires pour “Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?”

  1. Thanh dit :

    J’étais très hr, à présent je fais du "magicbr" et aussi du "linktop" ;-)

  2. giz404 dit :

    J’utilise pour ma part un ou un span avec un display:block, clear:both et un height à 1% pour "clearer" les floats. Sémantiquement, ça n’a pas de signification, ça alourdit (très légèrement) le code, mais étant donné les contraintes de temps que nous avons lors des intégrations et le bon comportement de cette méthode sous les différents navigateurs, je la trouve plutot convaincante. En ce qui concerne les resets, là encore, j’opte pour un simple *{margin : 0; padding : 0} ce qui permet de copier coller du code (css ou html) d’un site à l’autre sans surprises majeures. Là encore, c’est le temps qui dicte ses contraintes.

  3. Country dit :

    Personnellement j’essaye d’éviter d’insérer un élément supplémentaire dans mon code. Je met généralement un overflow:hidden sur le conteneur (+ un petit hack pour IE) et ça fonctionne plutôt bien. Il y a pas mal de méthodes différentes qui existent, à voir : http://www.robertnyman.com/2007/... http://www.positioniseverything…. http://www.quirksmode.org/css/cl...

  4. Christophe dit :

    Je rejoins Country pour la technique de Position is everything que j’ai découverte il y a 4 mois, depuis je n’utilise plus que ca et cela simplifie bien la vie !

    Pour le HR je l’utilise pour ce qu’il est prévu de faire sémentiquement, à savoir une séparation horizontale, soit un trait que je style à ma guise, mais je ne l’utilise plus pour la remise à zéro qui est trop problèmatique avec cette balise.

  5. br1o dit :

    giz404 > Pourquoi un span display: block et pas directement un div ? J’ai beaucoup utilisé la remise à zéro via le sélecteur univesel, mais c’est un peu radical. L’avantage du reset.css d’E.Meyer est de prendre en compte pas mal de paramètres comme font-size, notamment, ce qui permet de géréer l’héritage de la taille dans les éléments de formulaire, par exemple.

    Country > Merci pour ces liens indispensables (grrr! google.fr sucks ;) )

    Christophe > je vais me pencher sur la méthode utilisant :after qui a l’air pas mal.

    Thanh > Joli, ton linktop ;)

  6. Ben dit :

    J’utilisais moi aussi le hr jusqu’a il y a pas si longtemps ou j’ai découvert la méthode dont Country parle. Celle de l’overflow:hidden…Même si je me souviens pas avoir du passer par un hack en +

  7. Alexandre dit :

    Depuis hier, comme Thanh je suis magicbr :)

  8. Oh merci pour cet article, je me suis souvent demandé comment faisaient les autres ;-)

    Avant, j’utilisais la solution de positioniseverything (comme on peut le voir sur biologeek) mais je trouve ça un peu lourd. En fait tout dépend du design, des fois un simple br qui a une certaine hauteur ne gêne pas, parfois si et il faut un peu plus se casser la tête.

    Pour giz404 : le problème du sélecteur universel est un problème de performances : developer.mozilla.org/en/…

  9. Country dit :

    Ben : Ce que j’appel un hack c’est le fait de devoir spécifier une hauteur, une largeur ou zoom pour IE (pour activer le hasLayout)

  10. br1o dit :

    Tous les problèmes que j’ai rencontrés provenaient de l’absence de largeur explicite du bloc flottant qui contenait des flottants, ce qui provoquait des marges intempestives sous le bloc dans ie6. Un width: 100% et ça repart ;)

    David > Il serait intéressant de comparer les performances entre l’utilisation des sélecteurs descendants avec les équivalents disponibles dans jQuery. Pour voir s’il est encore bien raisonnable de travailler sur CSS 4 ou de tout passer par jQuery ? Ok, je sors… ;)

  11. Nouky dit :

    Perso, j’ai totalement adopté le "hr"… Mais à ce que je vois différentes solutions s’offrent à nous…

    Reste à savoir si je vais réussir à me défaire du hr comme ça !

  12. br1o dit :

    Nouky > Jusqu’à présent le HR m’a rendu des bons et loyaux services, mais c’est intéressant d’avoir d’autres méthodes sous la mains en cas d’urgence ;)

  13. Florent V. dit :

    Pour ma part, je suis très contexte de formatage (le overflow:hidden crée un contexte de formatage qui empêche le dépassement des flottants). Si, pour une raison ou une autre, je passe plutôt par un spacer, ce sera sans doute avec un div ou un span: aucune raison sémantique de lui préférer un hr ou un br, et c’est plus simple à gérer.

    Si on utilise un contexte de formatage, il restera à gérer IE6 (pour IE7 ça marche), en simulant le même effet grâce au HasLayout, effectivement. Pour cela, et si c’est nécessaire (c’est à dire si l’élément n’a pas déjà le layout), commentaires conditionnels, width:100%, height:1% et à la rigueur zoom:1 sont nos amis.

    Pour le pour et le contre du Reset CSS, ils sont bien résumés par Corinne dans le billet suivant: blog.alsacreations.com/20…

  14. br1o dit :

    Florent V. > Merci pour ces précisions, je vais certainement me pencher sur cet overflow: hidden qui semble une très bonne solution, surtout dans un contexte de site généré dynamiquement où il peut être utile d’épargner aux développeurs de gérer des balises superflues ;)

    J’ai déjà eu l’occasion de lire l’article de Corinne via mon aggrégateur ;) Cette question du reset n’a pas finie de faire crépiter les claviers ! (A ce sujet j’ai un billet en friche depuis quelques temps…)

  15. miendo dit :

    Rien de tel que le overflow: hidden sur le conteneur ! Non seulement le code reste sémantiquement correct (pas de balise superflue) et c’est beaucoup plus clean… Je n’utilise que cette méthode depuis 2 ans et je n’ai pas encore trouvé mieux.

  16. […] Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?, […]

  17. […] Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?, […]

  18. […] Pour rétablir votre flux HTML après les float: left, il existe plusieurs techniques dont j’ai déjà longuement parler dans les articles Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? […]

  19. […] Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais […]

  20. […] des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site