Why this "<p><div><br></div></p>" is shown strange in DOM? [duplicate]

Question

When you put <p><div></br></div></p> into body, you will get the strange DOM structure like:

<p></p>
<div></br></div>
<p></p>

Why does this happened? It seems that when <p> contains a block element this will happen.

Answer 1

According to the spec, p cannot have nested block elements, so the HTML parser automatically closes it before the div when building the DOM.