如何解释 CSS clear 属性？ [复制]

Question

我试图理解CSS clear property。我看到它添加了一个新行并防止其他元素重叠。我以我的个人观察和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，你就不允许任何人坐在两边并选择下一排椅子！