css: float div影响非 float div的内容

Question

我刚刚完成了 google css 演练:http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/

在尝试了示例文件(文件:css-walkthrough.html)后，我发现了一些奇怪的行为，我无法解释。

我在一个容器 div 中有三个 div:

<div id="wd-c">

  <div id="wd-1"><span>1</span></div>

  <div id="wd-2"><span>2</span></div>

  <div id="wd-3"><span>3</span></div>

</div>

我们有以下 css，它按预期呈现:所有 3 个 div 都“从流程中取出”，并显示在一行中。内容跨度位于 div 内。

#wd-c div {
    height: 150px;
    border: 1px solid #222;
    font-size: 150%;
    font-weight: bold;
    opacity: .7;
}

#wd-c div { width: 150px; }
#wd-c #wd-1 { width: 50px; } /*for clarity*/      

#wd-1 { float: left }
#wd-2 { float: left }
#wd-3 { float: left }

但是，当我取消注释时:

/*#wd-3 { float: left }*/

div #wd-1 和 #wd-2 仍然呈现为“脱离流”，#wd-3 呈现为 block 元素，与其他 2 个元素重叠。

奇怪的是，带有字符 3 的内容跨度出现在所有 div 下方，并且不再位于 #wd-3 内。

看起来 #wd-3 的内容受到了 float div 的影响，这显然是错误的。例如，当我将 #wd-3 的宽度更改为

#wd-c #wd-3 { width: 220px; }

角色在 div 内部渲染，就在重叠的 float div #wd-2 旁边。您有什么解释吗？

Answer 1

这是非常符合逻辑的。 float不会像 position:absolute 那样将相应的元素从文档流中取出。

通常，元素“尊重”附近的 float 元素并尝试相应地显示其内容。现在，通过删除第三个 div 上的 float ，它会绘制在 float div 下方。但是，它会尝试在下一个可能的位置渲染其内容，而不干扰 float 的 div 内容。

由于您声明了固定的宽度和高度，因此第三个 div 无法在不与 float div“冲突”的情况下显示其内容。这就是为什么内部 span-Element 被推到 float div 下方，该元素的下一个可用空间将位于此处。

我希望这能稍微解释一下机制。尝试尝试高度和宽度。 (将它们注释掉)，看看差异。