堆叠两个内部div在彼此顶部，同时可能保持浮动

Question

我已经发现了几次这个问题，但通常答案是移除浮动，或者问题已经足够大，浮动没有被使用。此外，我是第一次css'er所以请记住这一点。

所以，我有这个小提琴：https://jsfiddle.net/u1ydxoqn/

我想继续使用浮动（我想，我的意思是，我是一个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

在clear both

上添加rightBottom

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