Question

我刚刚完成了谷歌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呈现为块元素，与其他2重叠。

奇怪的是，内容跨越字符3，出现在所有div之下，不再在＃wd-3内。

好像＃wd-3的内容受到浮动div的影响，这显然是错误的。例如，当我将＃wd-3的宽度更改为

时

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

角色在div内部渲染，就在重叠的浮动div＃wd-2旁边..你有什么解释吗？

Answer 1

这很合乎逻辑。 float不会像position:absolute那样从文档流中取出相应元素。

通常，元素“尊重”附近的浮动元素并尝试相应地显示其内容。现在通过删除第三个div上的float，它将被绘制在浮动div之下。但是，它试图在不影响浮动的div内容的情况下在下一个地方呈现它的内容。

由于您声明了固定的宽度和高度，因此第三个div没有地方显示它的内容而不会与浮动的div“发生碰撞”。这就是为什么内部span - 元素被推到浮动的div之下，这个元素的下一个自由空间将是。

我希望这能解释一下机制。尝试尝试高度和宽度。（评论他们），看到差异。

Answer 2

尝试重新下载该示例，在我的计算机上3确实留在#wd-3 div中，当我浮动它时。

或者，如果您希望#wd-3 div对父块元素保持约束，请在overflow:hidden div上使用#wd-c。

css：浮动div影响非浮动div的内容

2 个答案: