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

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.

II-A. Deux, c'est trop▲

      </div>
      <!-- end .pix -->             
      <hr class="spacer" />         
    </div>
    <!-- end .contents -->         
    <hr class="spacer" />     
  </div>
  <!-- end #container --> 
</body>

II-B. C'était mieux avant ?▲

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; 
}

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 hack ni commentaire conditionnel. 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.

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.

V-A. Faire "reset", c'est rigolo tout le temps ?▲

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 ^_^

Tous mes remerciements à trotters213 pour sa relecture.