浮动元素未清除到文档流中的新行

Question

我正在尝试学习如何使用浮点数，并创建了一个包含3个浮点段落元素的测试页。

所有3个段落元素都已浮动left，因此它们本质上是内联的并形成3列。这些元素中的第二个具有clear: right属性。我希望这能将第三个浮动段落元素强制到文档流程中的“换行”（可以这么说），即，使其位于前两个浮动段落的下方，但事实并非如此。谁能解释为什么？

以下代码：

body {
  font-family: sans-serif;
}

#float1 {
  float: left;
  clear: left;
  margin: 5px;
  width: 30%;
  border: solid 2px black;
}

#float2 {
  float: left;
  clear: right;
  margin: 5px;
  width: 30%;
  border: solid 2px black;
}

#float3 {
  float: left;
  margin: 5px;
  width: 30%;
  border: solid 2px black;
}

<p id="float1"> Float 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p id="float2"> Float 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p id="float3"> Float 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

我确定这是我的误解。我很抱歉，如果以前曾问过这个问题。