html - When is a new line inserted before a floated element? -

this question has answer here:

• why <p> tag can't contain <div> tag inside it? 5 answers

i've created text, , added left floated boxes it. reason, behave differently. first box breaks line before it, second 1 doesn't. don't understand, why. jsfiddle: https://jsfiddle.net/qt9q7dn4/

(thie green colored texts words after 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> 

move divs outside paragraphs , close 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