给浮动元素添加边框

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>

我想在这两张图片和文字周围添加边框。 我尝试将一个

标签放在上面的3个标签周围，并使用style="border:2px black solid;"。 虽然这样会添加一个边框，但似乎没有考虑到图像。 也就是说，我们得到了类似以下内容的东西（使用StackOverflow和Google标志）。

我猜测这是因为浮动元素没有被视为 <div> 的一部分所导致的。我是一名软件开发人员，而不是网页开发人员，所以在 CSS 方面并不是专家。但我记得浮动元素在某种程度上是被“忽略”的。有没有人能详细描述一下发生了什么以及如何解决？

- Snowy Coder Girl

---

你可以尝试。轮廓：2像素实心蓝色。 - Jovylle

Answer 1

在这种情况下添加值为 hidden 或 auto 的 overflow 可以解决问题。

请查看以下例子:

http://jsfiddle.net/XMrwR/

通过溢出方式清除浮动

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

- Alex

---

很好。基本上在<div>中添加overflow:hidden;。它起作用了。谢谢。+1。 - Snowy Coder Girl

当它允许我时，我将标记它为答案。显示10分钟。 - Snowy Coder Girl

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>

fiddle: http://jsfiddle.net/JNets/

- benesch

Answer 3

将以下一行添加到您的CSS属性中：

overflow: hidden

- Kelvin Farrell