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

106

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?

html css Torben
la source

Réponses:

261

Écrivez comme ceci:

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

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

sandeep
la source
Voici comment faire. mais veuillez noter le point dans ma réponse sur la sémantique.
Alex
2
Juste une petite info: ::afteravec deux points est la méthode recommandée pour cibler les pseudo-éléments.
Dennis98
11
Chaque navigateur qui prend en charge la syntaxe double-deux-points (: :) CSS3 prend également en charge uniquement la syntaxe (:), mais IE 8 ne prend en charge que le simple-deux-points, donc pour l'instant, il est recommandé d'utiliser simplement le simple-deux-points pour une meilleure prise en charge du navigateur. :: est le nouveau format mis en retrait pour distinguer le pseudo contenu des pseudo sélecteurs. Si vous n'avez pas besoin de la prise en charge d'IE 8, n'hésitez pas à utiliser le double-virgule. css-tricks.com/almanac/selectors/a/after-and-before
retroriff
pourquoi devrions-nous mettre ceci: "content: ''; display: block;" ? et si vous voulez un wrapper en ligne?
Lucke
6

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%;
}
kernelpanique
la source
5

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 .

Mahdi
la source
1
affichage: la table peut ajouter un espacement supplémentaire; J'utilise display: block à la place
The Cog
0

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/

Alex
la source
1
Ce n'est pas du tout de la sémantique. 1) Nous effaçons toujours l'élément parent si son enfant a un flotteur dessus, par exemple selon votre réponse si je veux donner un aperçu de l'UL, ce n'est pas couvrir les LI parce que l'UL n'est pas clair & 2) J'ai une question Pourquoi vous donnez clair Classez dans une DIV séparée avant P. si vous donnez à P seulement, c'est aussi du travail
sandeep
0

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

Sachin Kumar
la source