Css 为什么'；t我的<；部门>；围绕另一个浮动的浮动<；部门>；而其他元素呢？

我有一个背景颜色为绿色的容器。在那绿色的

里面，我有一个

，它是黑色的，样式是一个盒子（50px x 50px）-这个

浮动到左边

现在，如果我在灰色的

后面添加一个

到我的标记中，我希望它在灰色的

周围浮动。确实如此。但是，当我用另一个样式为box（设置高度和宽度）的

替换时，它不再四处浮动，而是消失在浮动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>

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

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

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

---

非浮动div不会以本机方式环绕浮动division afaik。您应该做的是在

另一个框

div上添加

左边距：50px

，以便它在浮动容器旁边时正确流动。我不确定这是否是最好的解决方案，但如果您知道div将始终在浮动div旁边，它通常工作得很好。如果它不在浮动div旁边，那么它将在没有浮动div的情况下自动正确流动

看看这把小提琴

---

事实上，

本身的一部分，即块框，也隐藏在您的第一个
后面。这是因为它没有被浮动，所以它在正常的流程中被布置，就好像第一个
不在那里一样，因为一个盒子将它取出

您的
包含内联内容（其文本），但是内联内容能够围绕您的第一个
流动，因为内联内容就是这样生成的。这就是为什么你可以将一个图像向左或向右对齐，并且文本可以在图像不碍事的情况下围绕图像流动

你的第二个
，就像你的
一样，不是浮动的，所以它再次以正常的流程进行布局，就像你的第一个
不在那里一样。因为它们都有相同的维度，看起来好像一个完全隐藏在另一个后面

在代码中，第二个
位于
之后，因此它不会影响文本。但是，如果要将其添加到
之前：

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


围绕前一个div浮动的段落


然后，在阅读我上面的解释后，文本停止在第一个
周围流动的原因变得显而易见：因为您的第二个
挡住了路，隐藏在第一个
后面。正是第二个元素将您的
推到了下方。
我最近也遇到了这个问题，并发现在div中添加overflow:auto（或hidden）会导致它在浮动的div周围浮动（如您所料）

将另一个框的css更改为如下所示

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

这里有一个链接来测试这一点：

至于为什么会这样——我真的不知道。如果有人能解释一下这个问题，解释一下背后的原因，我会非常感激

这似乎与之有关。
您是否尝试过
浮动：左
另一个
div
也是吗？在示例代码中，只有#blackbox具有float:left-如果您想让另一个div也浮动，您需要使其也浮动：left