Javascript 浮动div在低于某个宽度时与未浮动div重叠

我在做一个项目时遇到了一个问题，我面临的问题是，一个向右浮动的div将覆盖下面的所有元素（似乎将该div视为没有内容）。该div是我在adobe edge animate中制作的一个动画徽标

HTML--

这只是CSS的一部分，因为要粘贴的内容太多了

可以在这里找到该网站的实时版本-

该网站将工作良好，直到你降低到500px以下的宽度。在此之后，3个标题div将更改，以便“lefthead”和“snippet”的宽度为50%，而“righhead”位于下方的中心位置

我尝试过使用“clear:two”，但似乎不起作用（我可能用错了，但我认为我不会）

感谢您的帮助。

---

谢谢

更新

@Matt Smith有一个我忽略的解决方案，比这个简单得多，我的坏朋友

---

总的来说，您有比需要更多的标记和样式，这对您来说有点问题。也就是说，问题的核心是关于

header

和

bottomhead

的所有

高度

声明。通过约束高度，堆叠图元的内容无法拉伸父图元的高度

@介质（最大宽度：500px）{
标题{
高度：80px；
}
}
@介质（最大宽度：767px）{
标题{
高度：100px
}
}
标题{
宽度：100%；
高度：100px；
}    
@介质（最大宽度：767px）{
.低头{
高度：80px；
}
}
.低头{
高度：80px；
}

删除或注释掉上述所有

高度

声明。这会让你得到你想要的，或者至少接近你想要的。您还可以删除

.break

和

.clear

div

你可能需要在说话之后做一些调整

您可以在多个位置简化操作，删除不需要的标记，即在

.bottomhead

中添加边框，并删除

.tophead

.bottomhead{
边框顶部：30px实心#20b148；
}

---

您可能还发现在引导中使用实用程序类很有用，例如

。向左拉
和
。向右拉
分别将元素向左和向右浮动。
更新

@Matt Smith有一个我忽略的解决方案，比这个简单得多，我的坏朋友


总的来说，您有比需要更多的标记和样式，这对您来说有点问题。也就是说，问题的核心是关于
header
和
bottomhead
的所有
高度
声明。通过约束高度，堆叠图元的内容无法拉伸父图元的高度

@介质（最大宽度：500px）{
标题{
高度：80px；
}
}
@介质（最大宽度：767px）{
标题{
高度：100px
}
}
标题{
宽度：100%；
高度：100px；
}    
@介质（最大宽度：767px）{
.低头{
高度：80px；
}
}
.低头{
高度：80px；
}

删除或注释掉上述所有
高度
声明。这会让你得到你想要的，或者至少接近你想要的。您还可以删除
.break
和
.clear
div

你可能需要在说话之后做一些调整

您可以在多个位置简化操作，删除不需要的标记，即在
.bottomhead
中添加边框，并删除
.tophead

.bottomhead{
边框顶部：30px实心#20b148；
}

您可能还发现在引导中使用实用程序类很有用，例如
。向左拉
和
。向右拉
分别将元素向左和向右浮动。
如果您只想使
下降到其他div之下而不重叠
，将此媒体查询规则集的
float
属性从
none
更改为
left
：

之前：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

之后：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

如果您只想使
下降到其他div之下而不重叠
，请将此媒体查询规则集的
float
属性从
none
更改为
left
：

之前：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

之后：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

@media (max-width: 500px) {
  .righthead {
    float: left !important;
  }
}

您需要在媒体查询中删除该特定大小的标题中的所有
高度。将其设置为高度：自动
而不是您需要在媒体查询中删除该特定大小的标题中的所有
高度。将其设置为高度：自动
相反
只是为了更好地理解，您到底希望发生什么？右边的浮动div是否应该使标题在下降时变大？徽标在<500px时应该放在哪里？这将驱动解决方案。请尽量避免使用
！重要信息
如果您可以避免它。为了更好地理解，您到底希望发生什么？右边的浮动div是否应该使标题在下降时变大？徽标在<500px时应该放在哪里？这将驱动解决方案。请尽量避免使用
！重要提示
如果您可以避免的话。这么简单的修复方法哈哈，非常感谢！这么简单的修复哈哈，非常感谢！这不是问题，但这是我遇到的另一个问题的原因，谢谢。这不是问题，但这是我遇到的另一个问题的原因，谢谢