When is a new line inserted before a floated element? [duplicate]

Question

I've created a text, and added some left floated boxes to it. But for some reason, they behave differently. The first box breaks the line before it, but the second one doesn't. I don't understand, why. JSFiddle: https://jsfiddle.net/qt9q7dn4/

(thie green colored texts are the words after the red boxes)

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

Move the divs outside the paragraphs and close the paragraphs.

<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