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

【问题标题】：Why does <div style="clear:both;"></div> breaks a paragraph and adds a new empty paragraph?为什么 <div style="clear:both;"></div> 会打断一个段落并添加一个新的空段落？
【发布时间】：2016-12-11 09:44:06
【问题描述】：

在下面的示例中，我有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 Dev Tools 的检查元素中的是：

http://imgur.com/a/DlaQO

所以这里它在span.nameOfAuthor 之后关闭了 span.quote，即使 span.btn 被包含为 span.inner 的子级，但它已将其移出 span.inner。它还在span.btn 之后添加了一个空的<p>。这是为什么呢？

当我将<div style="clear:both;"></div> 添加到清除时，这一切都会发生。

【问题讨论】：

如果你要标记一个报价，你应该使用 blockquote 元素。

标签： html css

【解决方案1】：

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

孤立的</p> 结束标签导致创建新段落的根本原因尚不清楚，但可以说这在相当长一段时间内一直是一致的行为，以至于the HTML5 spec mandates it，大概是出于遗留原因。

【讨论】：

... 真的很可惜。如果允许浏览器为错误处理做任何他们喜欢的事情，那么所有这些 Web 开发人员都必须更加努力地避免错误，以使他们的网站跨浏览器兼容。