html - float :right 奇怪的跨浏览器问题

Question

我对 float:left 和 float:right 有疑问。我以前从未见过这样的问题。我必须监督一些事情。

我试着给包装器一个固定的宽度，我试着给搜索框一个固定的宽度。没有任何效果。如果你在 Chrome 中缩小，它也会出错。这是什么问题？

有问题的 CSS:

.wrapper {
  margin: 0 auto;
  min-width: 980px;
  width: 90%;
}

.logo {
   float: left;

   margin-top: 27px;
}

.search {
  float: right;

  background: rgba(255,255,255,0.35);
  padding: 9px;
  border-radius: 3px;
  margin-top: 40px;
}

HTML:

<div class="wrapper">
   <div class="logo"><img ../></div>
   <div class="search">[...]</div>
   <br style="clear:both;" />
</div>

问题:为什么搜索框不会在所有浏览器/缩放中 float 到包装的右侧？

编辑:

问题已解决!非常感谢，还有“rblarsen”和“Anonymous.X”!

Answer 1

如果你给你的 .wrapper {overflow:hidden;} 它解决了这个问题。

我认为这是因为 .wrapper 没有任何高度，因此没有按应有的方式居中对齐。通过添加 overflow:hidden;，只要您没有为 .wrapper 指定高度，您就可以使 div 与您的内容具有相同的高度。

编辑:

overflow:hidden; 可能会导致 future 出现问题。检查 t.niese 的评论，以避免这些。