Html CSS div 的重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/712336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS div's overlapping
提问by Tom
I am trying to build a comments section for my website. In the comments section, I want it laid out WordPress-style, with the avatar to the left. It works, but what is happening is the comment text is wrapping around the avatar underneath. For an example, here. This probably has a simple solution to it but I am a CSS amatuer. This is the relevant XHTML and CSS:
我正在尝试为我的网站建立一个评论部分。在评论部分，我希望它以 WordPress 风格布局，头像在左侧。它有效，但正在发生的是评论文本环绕在下面的头像周围。例如，这里。这可能有一个简单的解决方案，但我是一个 CSS 业余爱好者。这是相关的 XHTML 和 CSS：
<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>
/*------- 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; }
采纳答案by Luca Matteis
Add this to div.right
将此添加到 div.right
margin-left: 51px;
回答by Mark Brackett
From the spec:
从规范：
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。
That means elements with display: blockthat are not positioned ignore the float.
这意味着display: block没有定位的元素忽略浮动。
However, line boxes created next to the float are shortened to make room for margin box of the float.
但是，在浮动旁边创建的行框会缩短，以便为浮动的边距框腾出空间。
That means inline elements do flow around floats. That's why your <span>and the text within <p>flows around div.left, even though the <p>and div.rightdo not.
这意味着内联元素确实围绕浮动流动。这就是为什么你<span>和里面的文字会在<p>周围流动div.left，即使<p>和div.right没有。
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.
表格的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而非“可见”的元素）不得与任何浮点重叠与元素本身相同的块格式上下文。如有必要，实现应通过将所述元素放置在任何前面的浮点下方来清除所述元素，但如果有足够的空间，则可以将其放置在这些浮点附近。
And, that - obtuse as it is - is the answer to your problem. You must insert a "new block formatting context".
而且，这 - 尽管它很钝 - 是您问题的答案。您必须插入“新块格式上下文”。
Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.
浮动、绝对定位元素、内联块、表格单元格、表格标题和具有“溢出”而不是“可见”的元素（除非该值已传播到视口）建立新的块格式上下文。
The easiest of these for you is1:
对你来说最简单的是1：
div.right { overflow: auto; }
Note that you probably alsowant1:
请注意，您可能还需要1：
div.comment { overflow: auto; }
To fix a related, but different problem. If your <p>content is shorter than your image, then the floated div.leftwill not expand the height of div.comment. Adding overflow: auto;takes you into the aptly named Complicated Casesportion of the spec:
修复相关但不同的问题。如果您的<p>内容比图像短，则浮动div.left不会扩展div.comment. 添加将overflow: auto;带您进入规范中恰当命名的复杂案例部分：
If the [Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible'] element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges
如果“溢出”不计算为“可见”时正常流中的[块级非替换元素]元素具有任何浮动后代，其底部边距边缘低于底部，则增加高度以包括这些边缘
Which basically says that floats only expand overflow <> visiblecontaining elements.
这基本上是说浮动只扩展overflow <> visible包含元素。
1overflow: hidden;would also work, but would crop content instead of throwing scrollbars if needed.
1overflow: hidden;也可以工作，但会在需要时裁剪内容而不是抛出滚动条。
回答by cletus
What you're seeing is that inline elements will respect floats but block level elements do not. You have to manually space around them or floats will overlap them.
您所看到的是内联元素会尊重浮动，但块级元素不会。您必须手动在它们周围留出空间，否则浮动会与它们重叠。
Either that or float the other block level element.
或者浮动另一个块级元素。
回答by Kevin Crowell
div.right { float: left; width: 482px; }
