css – 围绕浮动元素

说我有一些像下面的代码，我想在两个图像之间显示一些我左右浮动的文字。

<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>的一部分。我是一个软件开发人员，而不是网页开发人员，所以我不是CSS专家。但我认为我记得浮动元素在某种程度上是“忽视的”。任何人都可以详细说明发生了什么以及如何解决？

解决方法

在这种情况下添加一个值为hidden或auto的溢出补救问题。

检查下面的小提琴：

http://jsfiddle.net/XMrwR/

Clearing floats the overflow way

07001

原文地址：https://www.jb51.cc/css/218698.html