Html 为什么这些div重叠？

这对我来说毫无意义。我一直在研究这个问题，但我不知道为什么会有重叠。我有一种感觉，这是因为我使用了“img”标签，或者因为我需要在某个地方使用某种位置类型，但我已经尝试过了，但没有成功

#picdiv{
高度：405px；
宽度：320px；
边框：1px纯黑；
利润率：15px；
浮动：左；
}
#右舵{
宽度：620px；
高度：320px；
边框：1px纯黑；
} ​
“这里有一些鼓舞人心的文字，比如OMG！”
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，我们会毫不气馁地认为，这是一种罪过，因为这是对动物的惩罚。”
​

---

我更新了它，但仍然无法让它工作。：

浮动一个div会使它脱离“流”。所以你有点“浮动”的div在图像的顶部。如果浮动图像，它应该根据您的需要定位。

因为您有一个浮动div和另一个未浮动div，浮动div将从文档的正常流程中删除。您可以通过添加

float:right

至

#rightdiv

如果您希望其中一个显示在左侧，另一个显示在右侧（从div的id来看，这听起来像：），那么您需要手动设置它们的宽度（px、%，em-您需要的任何值），以便组合它们将水平地适合包含的元素。如果两个浮动元素不能放在同一行上，则第二个元素会“碰撞”到第二行

此外，如果在这些div下面有更多的内容，您可能会希望使用以下内容“清除”浮动元素：

<br style="clear:both" />

---

这将确保下面的任何元素不会与浮动元素重叠。我希望这有帮助

如果我理解您的意图，我会将

float:left

添加到

#rightdiv

---

这将使段落恰好出现在图像和标题的侧面。当然，如果父容器中没有足够的宽度，它将换行到下一行，因此需要注意。

首先，请注意边界重叠，但内容不重叠

据我所知，float属性在概念上有两种截然不同的用途，即使技术实现是相同的。第一种方法是让内容围绕元素流动，第二种方法是在布局中使元素彼此相邻。从我所看到的情况来看，您正在寻找第二个，但正在实现第一个

让我们看一下第一部分，让内容围绕元素流动

假设你正在发表一篇文章。你有许多段落的文字，加上一些图片插入整个机构。它们应该“浮动”在一边，左边或右边，段落文本应该围绕它们流动。而且，包含围绕图像流动的段落文本的框也应该包含图像本身。这就是您在代码中看到的

还有第二个，为了布局的目的，你想把东西粘在一起。这似乎就是你想要的

好吧，第一个目的的适应使第二个目的使用浮动有点难看。我不知道历史，但如果我不得不猜测的话，我会说浮动规格是围绕第一个目的设计的

基本上，您只需要将两个元素向左浮动，使用

float:left。右边的一个将不会试图围绕左边的一个流动，而是存在于它自己的垂直列中。即使它比左边的长，它也只会延伸它的柱，而不是在左边的柱下流动


这种方法有一个丑陋的方面，那就是你不能随便把东西放在两列下面。如果您只是插入另一个段落，它将围绕两个浮动元素：


为了解决这个问题，您需要在两个左浮动元素下面添加
clear:left


有关这方面的最终来源，请查看

还可以很好地解决浮动的常见问题。
我应该以什么方式浮动img？我将其向左浮动，但由于某种原因，图像消失了。我经常看到的是，在
上方选择了有趣的

。表面上我喜欢语义，但它是否也在下面增加了一些空间？我明白了。所以我需要一个容器盖在它们上面。让我试试我不懂的。我试着用一个包含div的函数进行编辑，但仍然不起作用。我不明白为什么现在不起作用，因为我以前做过类似的事情，而且很有效：很有趣，很有效。但是，无论浏览器大小如何，如何让它保持在原来的位置？我只是试着用jfiddle来做，但是如果分辨率太小，它会一直在另一个div下面碰撞。我添加了位置：固定，但不起作用：请看这里：尝试更改底部框的宽度，你会看到它一直在下方，然后在有足够空间时转到侧面。根据你的建议，再次使用容器div更新它，该容器足够大，但stll不起作用：看一看：@sab-容器不够宽（按4像素）。你必须将宽度、边距和边框相加。看起来你没有计算边框。这很有效…（我将#picdiv缩小了4像素）聪明人聪明人我忘了那些该死的边距和边界lol@sab-很高兴提供帮助。如果您需要可扩展到浏览器大小的液体布局，请查看此…关于您的编辑，
<br style="clear:both" />