何时在浮动元素之前插入新行？

Question

我创建了一个文本，并添加了一些左浮动框。但出于某种原因，他们表现得不同。第一个框打破了之前的行，但第二个框没有。我不明白，为什么。 JSFiddle：https://jsfiddle.net/qt9q7dn4/

（绿色文字是红色框后面的文字）

CSS：

div {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 5px;
}

.after {
    color: lime;
    font-weight: bold;
}

HTML：

<p>Lorem 
<div></div> 
<span class="after">ipsum</span> 
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, 
<div></div> 
<span class="after">vitae
</span> facilisis nibh. Integer eu eros 
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>

Answer 1

将div 移到段落，关闭段落。

<div></div>

<p>Lorem  <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>

<div></div> 

<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>

Fiddle