块元素如何在浮动div中工作？

Question

这是以下问题的延续：

CSS Float - The content stays in the default stack position

当我在box1中添加一个块元素（p元素）时（在浮动的box0之后），p元素按预期包装。但是，它不是从容器的边缘开始的。请看图像。

此外，当我添加display：inline-block，或float：left或overflow：hidden到paragraph元素时，行为也不同。有人可以解释一下这些情景吗？

http://jsfiddle.net/jintoppy/xGm5E/3/

<div class="box0">Box 0</div>
<div class="box1">Box1 should wrap with text elements.
    <p>But, what about block elements? Why it is behaving like this</p>
</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
    opacity: .5;
}
.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
}
p {
    border: 1px solid #000;
}

Answer 1

p中的文本没有足够的空间在那里开始一条新线，所以它只在浮动的右边缘开始，在浮动下面给出一个间隙的外观。如果您为p提供略高的上边距there will be enough room for the second line of text to start directly underneath the float：

p {
    margin-top: 1.2em;
    border: 1px solid #000;
}

您也可以像其他人一样提高行高;这将导致第一行足够高，第二行有足够的空间从浮动下面开始。

p元素的边界不会完全移出浮点数的原因是因为p元素的行为与.box1完全相同，因为它们都不是浮动。该文字的内容与我在my previous answer中描述的方式相同。

---

在您添加display: inline-block，float: left或overflow: hidden时，其行为不同的原因在我之前回答的评论中给出：

  

overflow: hidden导致该框生成一个块格式化上下文，这使得免疫到周围的浮点数。这导致整个盒子移动到浮子之外，而是坐在它旁边。

（从技术上讲，display: inline-block也会导致p元素本身就像一个内联元素，换句话说，它就像.box1中的第一个句子一样呈现内联，但是这个具有相同的效果。）

当.box1和p都没有生成块格式化上下文时，它们都参与相同的上下文，实际上是根元素的上下文。这就是导致他们以你观察的方式与浮动互动的原因。

块格式化上下文是一个非常复杂和广泛的主题，我宁愿不进入自己，但this question的答案有一个很好的视觉解释，说明它们如何工作以及元素如何在它们周围相互作用各种情况。

Answer 2

我认为这与行高有关。

p {
    border: 1px solid #000;
    line-height:1.5;
  }

这有效：）

Answer 3

在box1类中添加overflow: hidden;。尝试一次。