Ce qui est clearfix ?

Question

Récemment, j’ai cherché à travers le code de certains site et vu que chaque avait une classe .

Après un rapide sur Google, j’ai appris c’est pour IE6 parfois, mais est ce réellement la clearfix ? Pourriez-vous donner quelques exemples d’une mise en page avec clearfix, en comparant à une mise en page sans clearfix ?

Answer 1

Il est intéressant de noter qu'aujourd'hui, l'utilisation de flottaient des éléments pour la mise en page devient de plus en plus découragé par l'utilisation de meilleures alternatives.

• display: inline-block - Mieux
• Flexbox - les Meilleurs (mais limité prise en charge du navigateur)

Flexbox est pris en charge à partir de Firefox 18, Chrome 21, Opera 12.10, et Internet Explorer 10, Safari 6.1 (y compris le navigateur Safari Mobile) et Android par défaut du navigateur 4.4.

Pour le détail de la liste du navigateur, voir: http://caniuse.com/flexbox.

(Peut-être une fois qu'il est établi complètement, il peut être absolument recommandé de disposer les éléments.)

---

Un clearfix est un moyen pour un élément à effacer automatiquement après lui-même, de sorte que vous n'avez pas besoin d'ajouter d'autres balises. Il est généralement utilisé en float mises en page , où les éléments sont flottait à être empilés horizontalement.

Le clearfix est un moyen de lutter contre la hauteur est égale à zéro conteneur problème pour flottait éléments

Un clearfix est effectuée comme suit:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Ou, si vous n'avez pas besoin de IE<8, la suite est très bien aussi:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Normalement, vous auriez besoin de faire quelque chose comme suit:

<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->

Avec clearfix, vous avez seulement besoin de

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Lire à ce sujet dans cet article - par Chris Coyer @ CSS-Tricks

Answer 2

Les autres réponses sont correctes. Mais je tiens à ajouter que c'est une relique de l'époque où les gens ont d'abord apprendre le CSS, et abusé float de faire tout leur disposition. float est destinée à faire des trucs comme flottent des images à côté de longues courses de texte, mais beaucoup de gens l'ont utilisé comme principal mécanisme de mise en page. Puisqu'il n'était pas fait pour cela, vous devez hacks comme "clearfix" pour le faire fonctionner.

Ces jours - display: inline-block est une alternative efficace (sauf pour IE6 et IE7), bien que plus les navigateurs modernes sont à venir avec encore plus utile pour les mécanismes de mise en page sous les noms de flexbox, grille de mise en page, etc.

Answer 3

Le but de l' clearfix, est d'envelopper les éléments autour de leur flottait enfants. Sans un clearfix ou l'équivalent de style, un élément à ne pas enrouler autour de lui flottait enfants et de l'effondrement, comme si sa flottaient les enfants ont été placés absolument.

Il existe plusieurs versions de la clearfix, avec Nicolas Gallagher et Thierry Coblence comme les principaux auteurs.

Si vous souhaitez une aide pour les navigateurs plus anciens, il est préférable d'utiliser cette clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

En SCSS, vous devez utiliser la technique suivante :

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Si vous n'avez pas de soins sur la prise en charge pour les anciens navigateurs, il y a une version plus courte :

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Answer 4

Il s’agit d’une manière d’aborder les éléments flottants. Sans elle, conteneurs parent de ces éléments pourraient ont rompu en hauteur.

Voir cela

Un exemple

Answer 5

Une technique couramment utilisée en CSS float à base de modèles est l'affectation d'une poignée de propriétés CSS à un élément qui va contenir les éléments flottants. La technique, qui est souvent mise en œuvre à l'aide d'une définition de classe appelé clearfix- (en général) met en œuvre le code CSS suivant comportements:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Le but de l'ensemble de ces comportements est de créer un conteneur :after l'actif de l'élément contenant un seul". " marqué comme caché, ce qui effacera toutes les préexistante flotteurs et efficacement réinitialiser la page pour le prochain morceau de contenu.