为什么 <div style= "clear:both;" ></div>会中断段落并添加新的空段落？

Question

在下面的例子中，我有p.inner，它有它的子级。我用"来"清除"，并使"Btn"出现在右边和右边的"―Isaac Newton"下面。

我的原始代码是：

<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>

但Chrome开发工具的检查元素中出现的是：

http://imgur.com/a/DlaQO

因此，在这里，它在span.nameOfAuthor之后关闭了span.quote，尽管span.btn被包括为span.inner的子级，但它已经将其移出了span.inner。此外，它还在span.btn之后添加了一个空的<p>。为什么？

当我添加<div style="clear:both;"></div>以清除时，所有这些都会发生。

Answer 1

与span不同，div和p都是流元素。p不能包含任何流元素（包括其他p元素），因此div的存在立即结束<p>开始标记。（在旧版本的HTML中，短语元素和流元素曾经分别被称为"内联元素"one_answers"块级元素"，但它们不应该再被使用，因为它们可以而且确实会与CSS中使用的术语混淆。）

孤立的</p>结束标记导致创建一个新段落的根本原因尚不清楚，但足以说明这已经是相当长一段时间以来的一致行为，以至于HTML5规范强制要求它，可能是出于遗留原因。