为什么方框 3 在方框 2 浮动后立即失去其宽度、高度和背景?

Question

为什么方框 3 在方框 2 浮出后立即失去其宽度、高度和背景（注释未添加注释）？

<style>
  .div1 {
     width: 10em;
     height: 10em;
     background: lightblue;
  }
  .div2 {
     /*float: left;*/
     width: 10em;
     height: 10em;
     background: lightyellow;
  }
  .div3 {
     width: 10em;
     height: 10em;
     background: lightgreen;
  }
</style>

<div class="div1">Box1</div>
<div class="div2">Box2</div>
<div class="div3">Box3</div>

Answer 1

您需要清除浮点数：

  .div1 {
     width: 10em;
     height: 10em;
     background: lightblue;
  }
  .div2 {
     float: left;
     width: 10em;
     height: 10em;
     background: lightyellow;
  }
  .div3 {
     clear: both;/*otherwise div3 would be behind the div2*/
     width: 10em;
     height: 10em;
     background: lightgreen;
  }

<div class="div1">Box1</div>
<div class="div2">Box2</div>
<div class="div3">Box3</div>

如果要在内联行中显示所有div，则对所有div 使用 float。

Answer 2

啊，我现在明白了。将边框添加到div3 会显示它。因此，发生的事情是浅绿色框（框 3）隐藏在浅黄色框（框 2）后面，而文本"框 3"移动到下一行。