在彼此之間堆疊兩個內部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; 
}