使浮动框在另一个下方

Question

如何使蓝色框位于红色框的正下方而又没有多余的空间？

.div1 {
  background-color:black;
    display:inline-block;
    height:100px;

}
.div2 {
  background-color:red;
  float:right;
  display:inline;
  height:20px;

}
.div3 {
  background-color:blue;
  float:right;
  display:inline-block;
  height:30px;
  
}
.box {width:50px;
clear:both;
}

  <div class="div1 box">

  </div>

  <div class="div2 box">
  red
  </div>

  <br>
  <div class="div3 box">
  blue
  </div>

Answer 1

从您的html中删除<br>：

.div1 {
  background-color: black;
  display: inline-block;
  height: 100px;
}

.div2 {
  background-color: red;
  float: right;
  display: inline;
  height: 20px;
}

.div3 {
  background-color: blue;
  float: right;
  display: inline-block;
  height: 30px;
}

.box {
  width: 50px;
  clear: both;
}

<div class="div1 box">
</div>

<div class="div2 box">
  red
</div>

<!-- remove this: <br> -->

<div class="div3 box">
  blue
</div>

Answer 2

删除<br />标签。 [查看完成的输出或运行代码段的图像]像这样：

.div1 {
  background-color:black;
    display:inline-block;
    height:100px;

}
.div2 {
  background-color:red;
  float:right;
  display:inline;
  height:20px;

}
.div3 {
  background-color:blue;
  float:right;
  display:inline-block;
  height:30px;
  
}
.box {width:50px;
clear:both;
}

  <div class="div1 box">

  </div>

  <div class="div2 box">
  red
  </div>
  <div class="div3 box">
  blue
  </div>