我如何阻止右浮動的DIV相互推動，但僅限於特定區域內？

Question

我幾乎可以肯定，這個問題會因為之前被毆打而死掉，但是我發誓在這里或Google找不到足夠的答案。

我有一個HTML頁面，該頁面的寬度被限制為一定的最大值。 該文本在DIV標簽中還有很多相關的圖像，這些圖像沿右側浮動。

我已經做了一個示例JSFiddle ，它有些誇張。 現實生活中沒有太多浮動元素。 無論如何，包含藍色邊框的DIV越接近最大寬度，紅色邊框DIV之間的垂直距離不夠高，並且較低的DIV被推到左側。

因此， 我嘗試添加clear: right; 到DIV ，但隨之而來的又是一個新問題，那就是它們相對於所有事物 （包括包含DIV之外的元素） 都是相對清晰的。 容器外部的綠色邊框DIV將紅色邊框DIV向下推，這是不希望的。

是否有辦法迫使帶有紅色邊框的DIV在其上方的DIV下移動，並將效果限制在僅包含藍色的DIV內，從而使帶有綠色邊框的DIV不會將帶有紅色邊框的DIV向下推？ 盡管純CSS是理想的，但我願意接受涉及Javascript的解決方案。

這是CSS：

#otherthing {
    height: 300px;
    width: 80px;
    border: green thin solid;
    float: right;
}

#container {
 max-width: 36em;
    border: blue thin solid;
}

.test {
    border: red thin solid;
    float: right;
    clear: right;
    height: 180px;
    width:60px;
}

Answer 1

#container {
    position: absolute;
}

FIDDLE這里