在彼此之间堆叠两个内部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

上rightBottom

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