Использование: после того, как самостоятельно очистить div. Это работает правильно?

Question

У меня есть следующий HTML:

<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>

Я бы хотел, чтобы между div и span был промежуток в 10px в соответствии с полем. Но, поскольку div выше плавает, он не будет отображаться таким образом. Исправление, чтобы убедиться, что что-то ясно, это DIV. Чтобы сделать это через чистый CSS, кажется, что один из них должен использовать метод ': after' для вставки содержимого, для которого затем устанавливается значение clear:

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

Однако, это не совсем то, что я думаю, должно быть. Если я не включу стили высоты / видимости, чтобы на самом деле видеть период, когда он вставлен, я вижу, что он фактически рендерится внутри div (черная граница окружает его), а не после div (так что между div и span). Я неправильно понимаю, как это должно работать?

РЕДАКТИРОВАТЬ:

Вот более простой пример:

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>

Это заканчивается размещением точки после «Hello», а не после div.

Похоже, что: after и: before фактически добавляются к СОДЕРЖАНИЮ элемента, а не к самому элементу. Это верно?

Answer 1

Да, он добавляется к содержимому выбранного элемента. Вы можете попробовать обернуть div, а затем добавить его после div-обертки, но это в первую очередь противоречит цели использования: first после.

Answer 2

Вы также можете попытаться установить в div для «overflow: auto». Это работает везде.

Answer 3

Я бы предложил использовать clearfix - это намного проще, вы просто создали окружение с классом clearfix.

См. этот пример .