如何解释CSS清除属性？ [重复]

Question

此问题已经在这里有了答案：

What does the CSS rule “clear: both” do? （5个答案）

关闭4年前。

我试图了解CSS clear property。我看到它添加了new line并阻止了其他元素overlapping。我已经根据我的个人观察和some readings得出了结论。

这是我弄弄的东西：

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
  clear: left;
}

<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
  <mark>clear:left</mark> and see the impact</div>

您如何向非程序员解释这一点。说出您的wife？

Answer 1

假设我们有两排，每排有3张椅子。

现在想象您坐在第一排中间的椅子上。

[如果您说clear:left，则表示您不允许任何人坐在您的左边，同样，如果您说clear:right，则您不允许任何人坐在您的右边。

如果您说clear:both，您不允许任何人坐在任一侧并选择下一排椅子！