试图理解浮点数和文本

Question

我试图了解float如何与不同的元素一起工作。第一个示例具有2个<div>，该div浮动到left中，其中一个div具有一些文本。正如预期的那样，两者水平相邻放置。

Example 1

第二个示例具有相同的设置，除了最后一个带有文本的<div>不浮动到左侧。现在，我期望<div>位于第一个浮动<div>的下方。但是，结果是不同的。第二个<div>放在第一个<div>的下方，但文本位于第一个<div>的下方。

Example 2

谁能解释我发生了什么事？

Answer 1

float:left将div放在其容器的左侧，从而允许文本和行内元素环绕在其周围。您可以查看文档here。

这意味着第二个div不需要float:left（除非右边有更多div。相反，您需要表示第二个div是display: inline-block; ，而不是默认设置的display:block。区别表示为here，但从本质上讲，内联块不添加换行符，这意味着可以在下一个设置div到另一个元素。Example

当第二个div没有display: inline-block;或float:left属性时，会出现一个换行符，这会使文本显示在第一个div下方。

Answer 2

由于黄色div发生overflow，默认值为overflow: visible，因此黄色div中的文本会创建新的块格式上下文。
Overflow docs
Block formatting context