Div不會延伸到其內容的底部，當它裏面的div浮動

Question

我有2個div作爲列，都是左浮動，並設置爲清零。它們的容器div在頂部有一個背景圖像，所以背景位於兩列的頂部。

我想能夠在列的底部也有一個背景圖像。我創建了另一個div，它位於容器div內（但在列外），並將背景圖像設置在底部。

問題是這個div沒有擴展到它所包含的列的底部。我怎樣才能做到這一點？我試着玩弄漂浮物並清理，但沒有任何運氣。

Answer 1

給外部<div>「overflow：hidden;」。

Here is a jsfiddle.

Answer 2

嘗試設置外層div浮動：左以及

Answer 3

您可以在最後一個元素設置主容器內的以下內容：

#lastElement:after { 
    content:'.'; 
    display:block; 
    visibility:hidden; 
    overflow:hidden; 
    height:0; 
    clear:both; 
} 

這將創建一個新的塊元素清晰，並將解決您的問題。由Pointy提供的答案也可以工作，但如果容器的寬度/高度是固定的，並且內部內容可以更改（更多文本或添加其他圖像），則容器的內部內容將隱藏。

Answer 4

嘗試把一個div在您的專欄div容器像這條底線：

<div style='clear:both;'></div> 

這是一個有點黑暗，但我能想到的，沒有看到代碼自己是最好的，希望它刺傷的幫助。