如何解释CSS清楚属性？

Question

我试图理解 CSS clear property. I see that it adds a new line and prevents other elements from overlapping. I have concluded it with my personal observations and 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你就不允许任何人坐在任何一边并选择下一排椅子！

如何解释CSS清楚属性？

How to explain CSS clear property?

html

css

concept

css-float