Html 图像超出了容器div界限

有人能看一下下面的小提琴吗

我认为div应该调整它的高度以适应它的元素，除非元素是绝对定位的

为什么div没有扩展到图像的整个高度

---

我需要将图像向右对齐。我知道的唯一方法是

align='right'

，

位置：绝对；右：0

和

float:right

，所有这些都使包含的div无法将其高度调整为图像高度。

哎呀，抱歉，发帖了，你编辑了你的问题-我相信对齐的右侧是浮动的（你应该改为使用float:right和某种类型的a）

示例：

.intro{
利润率：10px；
外形：1px实心#CCC；
背景：#A00；
颜色：#FFF；
高度：自动；
溢出：自动；
}
​.img{
浮动：对；
高度：自动；
}​
很抱歉，找不到您请求的页面

​​​​​​​​​​

---

您需要做的是在p标记后添加

<div style="clear:both;"></div>

---

我相信这就是您想要的：

如果您希望文本在左侧，图像浮动在右侧，请执行以下操作：这是您的CSS：

您还可以在一个容器中包含两个宽度为50%的

div

。这将使您在放置图像时更加灵活，因为文本和图像都有自己的可修改的

div

s，具有独立的属性

“为什么div没有扩展到图像的整个高度？”

因为浮动将与块重叠，所以只有块格式上下文包含浮动。（你可以在这里找到整个主题的一个很好的概述：）

关于如何解决手头的问题：

align=right

实际上会导致img为

float:right

（不推荐使用

align

属性，应使用css）

要将浮动图像包含在其父级

div

中，您需要让父级

div

建立块格式上下文（块格式上下文包含嵌套的浮动），或者在

img

之后使用样式为

clear:right

的附加元素显式清除浮动

创建块格式上下文的一个简单解决方案是同时浮动父级

div

，尽管在这种情况下我的首选解决方案是简单地将其

溢出设置为
隐藏
（也会导致块格式上下文）

查看更新后的小提琴。
对我来说似乎很好…红色容器完全包含您的文本和图像？红色容器在Chrome上完全包含我的文本和图像…如何使图像保持在容器的右侧而不浮动？不，对不起，我想我一定是在您访问时更新了我的问题提交你的答案。我会选择clearfix路线。谢谢哈哈，我被这弄糊涂了：）很高兴它有帮助！另外，我应该注意到，可能有清除浮动的方式-clearfix可能不是最好的解决方案，您可能会发现overflow auto或其他解决方案更干净，在这种情况下对您更有效：这也解决了我的问题。这应该是答案。
<div style="clear:both;"></div>