Utilisation de :after pour effacer les éléments flottants

Question

J'ai une liste et les liens ont une valeur de float:left; . Le contenu après le <ul> doivent être alignés correctement. Je peux donc construire ce qui suit :

http://jsfiddle.net/8unU8/

J'ai pensé que je pouvais retirer le <div class="clear"> en utilisant des pseudo-sélecteurs comme :after.

Mais l'exemple ne fonctionne pas :

http://jsfiddle.net/EyNnk/

Dois-je toujours créer une div séparée pour effacer les éléments flottants ?

Answer 1

Écrivez comme ceci :

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Vérifier ceci http://jsfiddle.net/EyNnk/1/

Answer 2

Non, il suffit de faire quelque chose comme ça :

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

Et le CSS suivant :

ul li {float: left;}

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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

Answer 3

Cela fonctionnera également :

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Donner à la classe clearfix à la parent par exemple votre ul élément.

Sources d'information aquí y aquí .

Answer 4

Le texte "dasda" ne sera jamais absent d'une balise, n'est-ce pas ? D'un point de vue sémantique et pour que l'HTML soit valide, il suffit d'ajouter la classe clear à cette balise :

http://jsfiddle.net/EyNnk/2/

Answer 5

Utilisation

.wrapper:after {
    content : '\n';
}

Un peu comme la solution proposée par Roko. Elle permet d'insérer/modifier le contenu en utilisant : after et :before psuedo. Pour plus de détails, voir http://www.quirksmode.org/css/content.html