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

Question

这是以下问题的延续：

CSS Float - The content stays in the default stack position

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

此外，当我将 display: inline-block 或 float:left 或 overflow:hidden 添加到段落元素时，行为会有所不同。有人可以解释这些场景吗？

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 时行为不同的原因在我之前回答的 cmets 中给出：

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;。试试这个。