Utilisation: après pour les divs auto-claires. Est-ce que ça fonctionne bien?

Question

J'ai le code HTML suivant:

<div class="selfClear" style="float: left; border: 1px solid black;"> 
     ...floated stuff in here... 
</div> 
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span> 

Je voudrais qu'il y ait un écart 10px entre la div et span, par la marge supérieure. Mais, puisque le div ci-dessus est flotté, il ne sera pas rendu de cette façon. La solution pour s'assurer que quelque chose de clair est le DIV. Pour ce faire via CSS pur, il apparaît un shoudl utiliser le « : après » méthode de l'insertion de contenu qui est ensuite mis à effacer:

.selfClear:after { 
content: "."; 
display: block; 
height: 0px; 
clear: both; 
visibility: hidden; 
} 
.selfClear { 
    display: inline-block; 
} 

Toutefois, cela ne fait pas tout à fait ce que je pense qu'il devrait faire . Si je n'inclue pas les styles hauteur/visibilité pour que je puisse réellement voir la période telle qu'elle est insérée, je vois que c'est en fait à l'intérieur du div (la bordure noire l'enferme), plutôt qu'après la div (donc c'est entre le div et span). Est-ce que je ne comprends pas comment cela devrait fonctionner?

EDIT:

Voici un exemple simple:

CSS:

#theDiv { 
border: 1px solid green; 
} 

#theDiv:after { 
content: "."; 
} 

#theOtherDiv { 
border: 1px solid orange; 
} 

HTML:

<div id="theDiv"> 
    Hello 
</div> 
<div id="theOtherDiv"> 
    World 
</div> 

qui finit par placer une période après 'Bonjour' plutôt que après le div.

Il apparaît que: after et: before sont effectivement ajoutés au CONTENTS de l'élément, pas à l'élément lui-même. Est-ce exact?

Answer 1

Oui, il s'ajoute au contenu de l'élément sélectionné. Vous pourriez essayer d'encapsuler le div puis de l'ajouter après le div wrapper, mais cela va à l'encontre du but de l'utilisation: après en premier lieu.

Answer 2

Je suggère d'utiliser clearfix - c'est beaucoup plus simple, vous venez de configurer un entourage avec une classe de clearfix.

Voir this example.

Answer 3

Vous pouvez également essayer de définir le div englobant 'overflow: auto'. Cela fonctionne partout.