html - 将两个内部 div 堆叠在一起，同时可能保持 float

Question

我已经多次发现这个问题，但通常答案涉及删除 float ，或者问题已经足够老以至于没有使用 float 。另外，我是第一次 css'er，所以请记住这一点。

所以，我有这个 fiddle :https://jsfiddle.net/u1ydxoqn/

我想继续使用 float (我想，我的意思是，我是一个 CSS 菜鸟，所以如果这不是最佳做法，请告诉我。)我想要完成的是让黄色rightBottom div，正好放在 rightMiddle div 的下方。

是这样的:

如果由于某种原因 jsfiddle 消失或有人无法访问该站点，这是我当前的代码。

HTML

div.myContainer {
  background-color: teal;
  overflow: hidden;
  width: 500px;
}

div.barAcrossTop {
  background-color: red;
  padding: 5px;
}

div.rightMiddle {
  background-color: orange;
  float:right;
  padding: 5px;
}

div.rightBottom {
  background-color: yellow;
  float: right;
  padding: 5px;
}

<div class="myContainer">
  <p>
    myContainer
  </p>
  <div class="barAcrossTop">
    <p>
      barAcrossTop
    </p>
  </div>

  <div class="rightMiddle">
    <p>
      rightMiddle
    </p>
  </div>

  <div class="rightBottom">
    <p>
      rightBottom
    </p>
  </div>
</div>

Answer 1

在rightBottom上添加clear both

div.rightBottom {
    background-color: yellow;
    clear: both;
    float: right;
    padding: 5px;
}