为什么要清除它们在css中不起作用？

Question

我的代码在这里，我在样式表中设置了div2的{​​{1}}，但div3仍在其旁边浮动：

clear:both

#div1 {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  float: left;
  clear: left;
}

#div2 {
  width: 20em;
  height: 200px;
  background-color: seagreen;
  float: left;
  clear: both;
}

#div3 {
  width: 600px;
  height: 3cm;
  background-color: red;
  float: left;
}

浮动效果：

你看到div3在div2旁边，但我的div2都清楚了，为什么会这样？ 我在firefox和safari中测试过，没有区别。

Answer 1

clear表示元素不会在上一个浮动元素旁边冒泡。

由于 div2 为clear: both，因此它不会在 div1 旁边向上移动。

由于 div2 是float: left，它会向左移动， div3 会在它旁边起泡。

div3 没有clear所以没有什么可以阻止它冒泡。

Answer 2

你也可以向div3添加clear。