Utilisation: après pour effacer les éléments flottants

J'ai une liste et les li en ont un float:left;. Le contenu après le <ul>doit être correctement aligné. Par conséquent, je peux construire ce qui suit:

http://jsfiddle.net/8unU8/

J'ai pensé que je pouvais supprimer 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 un div distinct pour effacer les éléments flottants?

Écrivez comme ceci:

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

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

Non, ce n'est pas suffisant pour 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%;
}

Cela fonctionnera également:

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

.clearfix:after {
    clear: both;
}

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

Donnez la classe clearfixà l' élément parent , par exemple votre ulélément.

Sources ici et ici .

Le texte «dasda» ne sera jamais pas dans une balise, non? Sémantiquement et pour être valide en HTML, ajoutez simplement la classe clear à cela:

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

Utilisation

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

Tout comme la solution fournie par Roko. Il permet d'insérer / modifier du contenu en utilisant: après et: avant psuedo. Pour plus de détails, consultez http://www.quirksmode.org/css/content.html