放在浮动元素周围的边界 [英] Putting a Border Around Floating Elements
问题描述
说我有一些像下面的代码，我想在两个图像之间显示一些文本，我向左和向右浮动。
Say I have something like the following code, where I want to display some text between two images that I am floating left and right.
<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个上述标签上使用< div> ，并使用 style =border：2px black solid;。虽然这增加了一个边界，但似乎不考虑图像。也就是说，我们得到如下（使用StackOverflow和Google徽标）。
I want to add a border around the two images and the text. I tried putting a <div> around all 3 of the above tags and using style="border:2px black solid;". While this adds a border, it seems to not take the images into account. That is, we get something like the following (using StackOverflow and Google logos).
>
我猜这是发生的，因为浮动元素不被认为是< div> 的一部分。我是一个软件开发人员，而不是一个Web开发人员，所以我不是CSS的专家。但我认为我记得浮动元素在某种程度上被忽略。任何人都可以详细描述发生了什么，如何解决它？
I am guessing this is happening because the floating elements are not being considered as part of the <div>. I am a software developer, not a web developer, so I am no expert in CSS. But I do think I recall that floating elements are kind of "ignored" in a way. Can anyone give a detailed description of what is going on and how to fix it?
推荐答案
在这种情况下添加溢出 c $ c>隐藏或自动可解决问题。
Adding an overflow in this case with a value of hidden or auto remedies the issue.
：
清除浮动溢出方式
Clearing floats the overflow way
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats .html
这篇关于放在浮动元素周围的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
