在浮动元素周围放置边框

Question

假设我有类似下面的代码,我希望在两个左右浮动的图像之间显示一些文本.

<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>

我想在两个图像和文本周围添加边框.我尝试<div>使用以上所有3个标签style="border:2px black solid;".虽然这增加了边框,但似乎没有考虑图像.也就是说,我们得到类似以下内容(使用StackOverflow和Google徽标).

我猜这种情况正在发生,因为浮动元素并未被视为其中的一部分<div>.我是一名软件开发人员,而不是Web开发人员,所以我不是CSS的专家.但我确实认为我记得浮动元素在某种程度上是"被忽视"的.任何人都可以详细描述发生了什么以及如何解决它？

Answer 1

overflow在这种情况下添加一个值hidden或auto补救问题.

检查下面的小提琴:

http://jsfiddle.net/XMrwR/

清理浮动溢出方式

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

Answer 2

在CSS中,默认情况下浮动元素不会向父级添加高度.

解决方案就是设置overflow: hidden.

<div style="border: 2px solid black; overflow: hidden;" 
    <img src="testImage1.png" alt="Test Image 1" style="float:right;" />
    <img src="testImage2.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

小提琴:http://jsfiddle.net/JNets/

Answer 3

将此行添加到CSS属性中:

overflow: hidden