bootstrap.css : .container:before afficher le tableau

Question

Sur bootstrap.css

que vous pouvez trouver soit à partir de Github soit à partir de http://twitter.github.com/bootstrap/#

Pourquoi l'utiliser :

.container:before, .container:after {
  display: table;
  content: "";
  zoom: 1;
  }

  .row:before, .row:after {
   display: table;
   content: "";
   zoom: 1;
   }

Pourquoi définir display:table dans .container:before/after et .row:before/after ?

Answer 1

http://nicolasgallagher.com/micro-clearfix-hack/

Le site hack clearfix est un moyen populaire pour contenir des flottants sans avoir recours à l'utilisation de balises de présentation. Cet article présente une mise à jour de la clearfix qui réduit encore la quantité de CSS nécessaire.

http://html5boilerplate.com/docs/The-style/#clearfix :

Ajout de .clearfix à un élément garantira qu'il est toujours entièrement entièrement ses enfants flottants. Il y a eu de nombreuses variantes du clearfix au fil des années, et il existe d'autres astuces qui peuvent également également vous aider à contenir les enfants flottants, mais l'H5BP fournit actuellement cette classe d'aide clearfix micro.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Cette règle est comprise par tous les navigateurs, à l'exception d'IE6/7. Elle génère un pseudo-élément avant et après le contenu de l'élément qui contient des flottants. Réglage de display: table crée un fichier anonyme table-cell et un nouveau contexte de mise en forme des blocs. Cela permet d'éviter l'effondrement de la marge supérieure et améliore la cohérence entre les navigateurs modernes et modernes et IE6/7.

• .clearfix:after { clear: both; }
  Fait le :after pseudo-élément efface les enfants flottants de cet élément, ce qui permet à l'élément de s'étendre pour contenir les éléments flottants.

• .clearfix { zoom: 1; }
  Créer un nouveau contexte de formatage de bloc dans IE6/7 en déclenchant hasLayout