为什么不清除：右清除两列文本中段落元素的右侧？

Question

我试图理解浮点数，我制作了两列文本：

* {
  box-sizing: border-box;
}

p {
  float: left;
  background: pink;
}

#p1 {
  width: 50%;
  clear: right;
}

#p2 {
  width: 50%;
}

<p id="p1">Paragraph 1.</p>
<p id="p2">Paragraph 2.</p>

因为我将 #p1 设置为 clear:right，所以我认为 #p2 文本会在它下面，因为在我的理解中，clear:right 表示没有其他元素应该浮动在 #p1 的右侧.

如果我将#p2 设置为 float:right，也会发生同样的情况。他们的文件看起来一样，没有任何反应。

我很难理解为什么#p2 文本没有从#p1 侧出来。有人可以解释一下吗？

Answer 1

出清是指低于前值，而不是低于后值。另外，如果每个元素都有 50% 的宽度，那么从同一侧就真的没有什么可以清除的了。您必须清除对面或两面。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  float: left;
  width: 50%;
  background: pink;
}

#p1 {
  clear: right;
}

#p2 {
  float: right;
  clear: left;
}

#p3 {
  float: left;
  clear: both;
}

<p id="p1">Paragraph 1.</p>
<p id="p2">Paragraph 2 (cleared left).</p>
<p id="p3">Paragraph 3 (cleared both ways).</p>

为什么不清除：右清除两列文本中段落元素的右侧？

Why doesn't clear: right clear the right side of a paragraph element in a two columns text?

html

css

css-float