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> 

这是一个有点黑暗，但我能想到的，没有看到代码自己是最好的，希望它刺伤的帮助。