当父位置是相对的时，显示在<div>之外的文本</div>

Question

我的标题栏<div>包含一些文字。 <div>的位置一切正常，但由于某种奇怪的原因，其中的文字完全位于<div>之外，如JSFiddle代码中所示。

我认真尝试了一切，但我不知道为什么这个文本在那里。它可能包含上面的浮动<div>或父元素（<div>）设置为：

div#user_topics_box {
    position: relative;
    top: 134px;
    left: 0px;
}

但我仍然不明白这是如何影响内心文本的。任何帮助，将不胜感激！

修改 文本应该在它上面的第一个黑条div内。

Answer 1

将overflow:auto或clear:left添加到.infobox：

.infobox {
    border-right:2px inset #888;
    border-left:2px inset #888;
    border-bottom:2px inset #888;
    overflow:auto;
}

jsFiddle example （溢出）

jsFiddle example （清除）

Answer 2

您应该使用#user_topics_title之类的内容清除clear: both;上的浮动广告。 在#user_topics_box上，您应设置top: 0;并将height调整为适合您需求的内容。

Demo JSFiddle

Answer 3

http://jsfiddle.net/Ka6f5/1/show/
http://www.quirksmode.org/css/clearing.html

您需要清除前面的浮动容器。

#user_topics_box {
  clear: both;
  left: 0;
  position: relative;
  top: 134px;
}

并使浮动容器包含在父容器中

#profile_area {
  overflow: hidden;
}