Html Firefox会导致垂直相邻的图像向一侧凸起

我一辈子都搞不清楚这件事

我把两个div叠在一起，每个div上面都有一个图像，这个图像也叠在一起，形成了一个由两部分组成的logo。它可以在Chrome和Safari上正常工作，但由于某些原因，底部图像会向右突出

几乎像一个文本包装，但我不明白为什么会这样，因为Firefox没有理由认为这些图像是重叠的

我整个下午都在做这件事，找不到解决办法，所以提前谢谢你的帮助

相关HTML：

<div id="top_blue">
   <div class="imgholder1"><img src="./img/top_half_white.png"></div>
</div>

<div id="top_green">
    <div class="imgholder2"><img src="./img/bottom_half.png"></div>
</div>

---

在

#top_blue

上将高度更改为81px为我修复了Firefox中的问题。

添加以下内容：

#top_green {clear:both;}

---

将以下内容添加到

.imageholder1.imageholder2

clear: left;

顺便说一句，漂亮的明星

您需要：

容器

clearfix

正确使用浮动和保证金

完整的标志，而不是分割（给我完整的图像，我会给你的css）

HTML:

对于徽标：

如果徽标高度为200px，导航高度为50px，则顶部高度必须为150px（在.css中固定和声明的高度）。这样，徽标将位于导航栏上，但位于标签内

---

jsIDLE:

忘记了链接。啊。链接坏了，那么这个问题对未来的读者就没有价值了。将代码粘贴到您的问题中。正如Jim所说，在问题中发布代码，也许除了发布的代码之外还有a，我将进行投票，因为这是一个有趣的问题。谢谢大家的提醒，@JimGarrison和Darklord47。将代码粘贴到问题中。如此简单的解决方案。工作完美。谢谢

clear: left;

<header class='block'>

  <top class='block'>
    <div class='container clearfix'>
      <div id='logo'>&nbsp;</div>
    </div>
  </top>

  <nav class='block'>
    <div class='container'>
      <ul class='clearfix'>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Endorsements</a></li>
        <li><a href=''>Contribute</a></li>
        <li><a href=''>Contact</a></li>
      </ul>
    </div>
  </nav>

</header>

<main>
  <div class='container'>
    <div class='red'>some text here</div>
  </div>
</main>

*
{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

li
{
  list-style: none;
}

.red
{
  background: red;
}

.container
{
  max-width: 800px;
  margin: auto;
}

.block
{
  width: 100%;
  display: block;
}

.clearfix
{
  display: block;
}

.clearfix::before, 
.clearfix::after
{
  content: " ";
  display: block;
  width: 100%;
  clear: both;
}

top
{
  background: blue;
}

top #logo
{
  height: 200px;
  width: 500px;
  float: left;
}


nav
{
  background: green;
}

nav ul {
  float: right;
}
nav ul li{
  float: left;
}

nav ul li a
{
  display: block;
  padding: 10px 20px;
}