为什么我的 <div> 不浮动在另一个浮动的 <div> 周围，而其他元素呢？答案

【问题标题】：Why doesn't my <div> float around another floated <div> while other elements do?为什么我的 <div> 不浮动在另一个浮动的 <div> 周围，而其他元素呢？
【发布时间】：2012-11-12 06:09:33
【问题描述】：

我有一个背景颜色为绿色的容器。在那个绿色的<div> 里面，我有一个黑色的<div>，它的样式是一个盒子（50px x 50px）——这个<div> 浮动到左边。

现在，如果我在灰色 <div> 之后将 <p> 添加到我的标记中，我希望它会在灰色 <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;
}

【问题讨论】：

您是否也尝试过float:left; 另一个div？
在您的示例代码中，只有 #blackbox 具有 float:left - 如果您想让另一个 div 也浮动，您需要使其也浮动：left

标签： css css-float

【解决方案1】：

实际上，<p> 本身的一部分，它是一个块框，也隐藏在你的第一个 <div> 后面。那是因为它没有被浮动，所以它在正常流程中被布置好像第一个 <div> 不存在，因为 floating 一个框将它从 normal flow 中取出。

您的<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> 推低了。

【讨论】：

【解决方案2】：

非浮动 div 本身不会环绕浮动分区 afaik。你应该做的是在anotherbox div 上添加margin-left: 50px 以让它在浮动容器旁边正确流动。我不确定这是否是最佳解决方案，但如果您知道 div 将始终在浮动 div 旁边，它通常会很好地工作。如果它不在它旁边，那么它会自动在没有它的情况下正确流动。

看看这个小提琴。

http://jsfiddle.net/bvSby/

【讨论】：

【解决方案3】：

我最近也遇到了这个问题，并且纯粹是偶然发现将 overflow: auto （或隐藏）添加到 div 会导致它在浮动的 div 周围浮动（如您所料）。

把#anotherbox的css改成这样...

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

这里有一个测试链接：https://jsfiddle.net/kh3pdbtx/

至于 为什么 这有效 - 老实说，我不知道。如果有人能阐明这个主题并解释其背后的原因，我将不胜感激。

好像和Block formatting context有关。

【讨论】：