Question

我有一个背景颜色为绿色的容器。在绿色<div>内，我有一个<div>，它是黑色的，并且被设置为一个方框（50px x 50px） - 这个<div>浮动到左边。

现在，如果我在灰色<p>之后向我的标记添加<div>，我希望它会在灰色<div>周围浮动。确实如此。然而，当我用另一个<div>取代

时，它被设置为方框（设置高度和宽度），它不会再浮动，但会在浮动div后面消失。

即使我有第一段正确浮动的段落，然后我添加div（框），段落也会停止浮动并出现在另一条线上。

HTML：

<div id="greencontainer">
    <div id="blackbox"></div> <!--this one is float:left;-->
    <p>A paragraph that floats around the previous div</p>

    <div id="anotherbox"></div> <!-- if I add another div with set width and height, it disappears behind the floated one, and even prevents the paragraph from floating around.-->
</div>

CSS：

#blackbox {
    width:50px;
    height:50px;
    background-color:black;
    float:left;
}

#p {
    margin:0px;
    padding:0px;
}

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
}

Answer 1

实际上，<p>本身的一部分，也就是一个阻止框，也隐藏在你的第一个<div>之后。那是因为它没有被浮动，所以它正在正常流中布局，好像第一个<div>不存在，因为floating一个框从{{3}中取出}}

您的<p>包含内联内容（其文字），但内联内容可以绕过您的第一个<div>，因为内联内容就是这样做的。这就是为什么你能够将图像左右对齐，文本能够在图像周围流动而不会妨碍图像。

你的第二个<div>，就像你的<p>一样，没有浮动，所以再次将它放在正常的流程中，好像你的第一个<div>不存在一样。由于它们都具有相同的尺寸，看起来好像一个完全隐藏在另一个之后。

在您的代码中，<div>之后会有第二个<p>，因此不应影响该文本。但是，如果您打算在 <p>之前添加：

<div id="greencontainer"> <div id="blackbox"></div> <div id="anotherbox"></div> <p>A paragraph that floats around the previous div</p> </div>

然后，在阅读上面的解释之后，文本停止在第一个<div>周围流动的原因变得很明显：因为你的第二个<div>挡住了，隐藏在第一个<p>后面。这是推动{{1}}向下的第二个因素。

Answer 2

非浮动div不会原生地围绕浮动分区。您应该做的是在margin-left: 50px div上添加anotherbox以使其正确流动（如果它位于浮动容器旁边）。我不确定这是否是最好的解决方案，但如果你知道div 总是在浮动的div旁边，它通常会运行良好。如果它不在它旁边，那么它将自动正确流动。

看看这个小提琴。

http://jsfiddle.net/bvSby/

Answer 3

我最近也遇到过这个问题并且纯粹偶然发现添加溢出：自动（或隐藏）到div，会导致它浮动浮动div（就像你期望的那样）。

将#anotherbox的css更改为这样......

#anotherbox {
    width:50px;
    height:50px;
    background-color:grey;
    overflow: auto;
}

以下是测试此内容的链接：https://jsfiddle.net/kh3pdbtx/

至于为什么这是有效的 - 老实说我不知道。如果有人可以对这个问题有所了解并解释其背后的原因，我真的很感激。

这似乎与Block formatting context有关。

为什么我的<div>不会浮动另一个浮动的<div>而其他元素呢？</div> </div>

3 个答案: