3

我有以下 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 的间隙，每个 margin-top。但是，由于上面的 div 是浮动的，它不会以这种方式呈现。确保某些东西清晰的修复是 DIV。要通过纯 CSS 做到这一点，似乎应该使用 '::after' 插入内容的方法，然后将其设置为清除：

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

但是，这并没有完全做到我认为应该做的事情。如果我不包括高度/可见性样式，以便在插入时实际上可以看到句点，我会看到它实际上是在 div 内呈现（黑色边框包围它），而不是在 div 之后（所以它介于div 和跨度）。我是否误解了这应该如何工作？

编辑：

这是一个更简单的例子：

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实际上是附加到元素的 CONTENTS 中，而不是元素本身。那是对的吗？

4

3 回答 3

3

是的，它附加到所选元素的内容。您可以尝试包装 div 然后附加在包装 div 之后，但这首先违背了使用 :after 的全部目的。

于 2009-10-09T16:26:39.997 回答
3

您也可以尝试将封闭的 div 设置为“溢出：自动”。这在任何地方都有效。

于 2009-10-09T17:54:35.170 回答
2

我建议使用 clearfix - 它要简单得多，您只需设置一个带有 clearfix 类的 surronding。

请参阅此示例。

于 2009-10-09T16:26:39.043 回答