CSS div 的重叠答案

【问题标题】：CSS div's overlappingCSS div 的重叠
【发布时间】：2010-10-17 06:35:21
【问题描述】：

我正在尝试为我的网站构建一个 cmets 部分。在 cmets 部分，我希望它采用 WordPress 风格的布局，头像位于左侧。它有效，但正在发生的是评论文本环绕在下面的头像周围。例如，here。这可能有一个简单的解决方案，但我是一个 CSS 业余爱好者。这是相关的 XHTML 和 CSS：

/*------- COMMENTS -------*/

#comments {
  width: 91px;
  height: 18px;
  background: url(images/comments.png) no-repeat;
  text-indent: -9000px;
  margin-bottom: 10px;
}

div.comment {
  padding: 5px 5px 30px 5px;
  background: url(images/commentbar.png) bottom center no-repeat;
  margin-bottom: 10px;
}

div.comment div.left {
  margin-left: 10px;
  float: left;
  width: 51px;
}

div.comment div.right {
  width: 482px;
}

div.comment div.right h3 {
  color: #e6267c;
  font-size: 18px;
  display: inline;
  text-transform: uppercase;
}

<div class="comment">
  <div class="left">
    <img src="images/noavatar.png" alt="No Avatar" />
  </div>

  <div class="right">
    <h3>Laura Brauman</h3>
    <span>12 March 09</span>
    <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus
      risus. Pellentesque lacus sem, luctus tempus.</p>
  </div>
</div>

【问题讨论】：

标签： html css css-float

【解决方案1】：

将此添加到 div.right

margin-left: 51px;

【讨论】：

【解决方案2】：

您所看到的是内联元素会尊重浮点数，但块级元素不会。您必须手动在它们周围留出空间，否则浮动会与它们重叠。

或者浮动另一个块级元素。

【讨论】：

【解决方案3】：

div.right { float: left; width: 482px; }

【讨论】：

【解决方案4】：

来自spec：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。

这意味着带有display: block 且未定位的元素会忽略浮动。

但是，在浮动旁边创建的线框会缩短，以便为浮动的边距框腾出空间。

这意味着内联元素确实会围绕浮点数流动。这就是为什么您的<span> 和<p> 中的文本在div.left 周围流动，即使<p> 和div.right 没有。

表格的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而不是“可见”的元素）不得与任何元素重叠浮动在与元素本身相同的块格式化上下文中。如有必要，实现应通过将其放置在任何先前的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。

而且，这——尽管它是迟钝的——是你问题的答案。您必须插入“新的block formatting context”。

浮动、绝对定位的元素、内联块、表格单元格、表格标题和具有“溢出”而不是“可见”的元素（除非该值已传播到视口）建立新的块格式化上下文。

对你来说最简单的是1：

div.right { overflow: auto; }

请注意，您可能也想要1：

div.comment { overflow: auto; }

解决一个相关但不同的问题。如果你的<p> 内容比你的图片短，那么浮动的div.left 不会扩大div.comment 的高度。添加overflow: auto; 会将您带入规范中恰当命名的Complicated Cases 部分：

如果 [当“溢出”不计算为“可见”时正常流中的块级非替换元素] 元素具有任何浮动后代，其底部边距边缘低于底部，则高度增加以包括那些边缘

这基本上是说浮动只扩展 overflow <> visible 包含的元素。

1 overflow: hidden; 也可以，但如果需要，会裁剪内容而不是抛出滚动条。

【讨论】：