Utilisation :après l'auto clair divs. Est-ce le droit de travailler?

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>

J'aimerais qu'il y ait un 10px écart entre la div et span, par le margin-top. Mais, depuis la div ci-dessus est flottant, il ne rend pas de cette façon. Le correctif assurez-vous que quelque chose de clair de la DIV. Pour le faire par pur CSS, il apparaît un shoudl utiliser le ':après la méthode de l'insertion du contenu qui est alors mis en clair:

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

Cependant, ce n'est pas tout à fait faire ce que je pense qu'elle doit faire. Si je ne comprend pas la hauteur et de la visibilité de styles de sorte que je peux réellement voir l'exercice comme il est inséré, je vois que c'est effectivement rendu à l'intérieur de la div (la bordure noire enferme), plutôt que d'après la div (c'est donc entre la div et span). Suis-je l'incompréhension comment cela devrait fonctionner?

EDIT:

Voici un exemple plus 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 un point après "Bonjour", plutôt qu'après la div.

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

OriginalL'auteur DA. | 2009-10-09