css - 为什么我的 <div> 没有漂浮在另一个漂浮的 <div> 周围，而其他元素却漂浮着？

Question

我有一个背景色为绿色的容器。在那绿色里面<div> , 我有一个 <div>它是黑色的，样式为盒子 (50px x 50px) - 这个 <div>向左浮动。

现在如果我添加 <p>到灰色之后的我的标记 <div> ，我希望它漂浮在灰色周围 <div> .确实如此。但是，当我将

替换为另一个 <div> 时样式为盒子(设置高度和宽度)，它不再 float ，而是消失在 float 的 div 后面。

即使我的第一段正确地四处 float ，然后我添加了 div(框)，这些段落也会停止四处 float 并出现在另一行上。

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> 的一部分它本身是一个 block 盒，也隐藏在您的第一个 <div> 后面。 .那是因为它没有被 float ，所以它被布置在正常流中 就好像第一个 <div>不在那里，因为floating一个盒子把它拿出来 normal flow .

你的 <p>包含内联内容(其文本)，但是内联内容能够围绕您的第一个 <div> 流动，因为内联内容是这样制作的。这就是为什么您能够将图像左对齐或右对齐并且文本能够在图像周围流动而不会妨碍图像的原因。

你的第二个 <div> , 就像你的 <p> , 没有 float ，所以它再次以正常流布局，就像你的第一个 <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>下。