Why does <div style=“clear:both;”></div> breaks a paragraph and adds a new empty paragraph?

Question

In following example I have p.inner which has its children. I am using "" to "clear" and make "Btn" appear on the right and under the "― Isaac Newton" which is also on the right.

My original code is:

<p class="inner">
    <span class="quote">Gravity explains the motions of the planets, but it cannot explain who sets the planets in motion.</span>

  <span class="nameOfAuthor">― Isaac Newton</span>
  <div style="clear:both;"></div>
    <span class="btn">Btn</span>
</p>

But what appear in the inspect element of Chrome Dev Tools is this:

http://imgur.com/a/DlaQO

so here it has closed span.quote after span.nameOfAuthor even though span.btn was included as child of span.inner but it has moved it out of span.inner. Also it has added an empty <p> after span.btn . Why is that?

This all happens when I add <div style="clear:both;"></div> to clear.

Answer 1

Unlike span , which is a phrasing element, div and p are both flow elements. A p cannot contain any flow elements (including other p elements), so the presence of the div immediately ends the <p> start tag. (Phrasing elements and flow elements used to be known in older versions of HTML as "inline elements" and "block-level elements" respectively, but they should no longer be used as they can — and do — create confusion with the same terms as used in CSS.)

The underlying reason the orphaned </p> end tag results in the creation of a new paragraph is not known, but suffice it to say that this has been consistent behavior for quite some time now, to the point that the HTML5 spec mandates it , presumably for legacy reasons.