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

Question

我有这个标题栏<div>包含一些文本。 <div>的位置一切正常，但由于某些奇怪的原因，其中的文本完全在 <div> 之外在JSFiddle中如下代码。

我认真地尝试了一切，但我就是找不到为什么会有这篇文章。它可能与 float <div> 有关的上方或父元素(<div>)被设置为:

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

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

编辑: 文本应该位于其上方的第一个黑条 div 内。

Answer 1

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

您需要清除前面的 float 容器。

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

并使 float 容器包含在父容器中

#profile_area {
  overflow: hidden;
}