CSS溢出问题

Question

我在我的网站上使用overflow: hidden来控制浮动元素。

迄今为止，这一方法总是可以完美地解决浮动问题。

我知道有几种不同的方法可以结束floats，但是overflow的技巧通常效果最好。

然而，这一次我无法正确地做到这一点。

如果您查看以下页面并尝试调整音量，您会发现音量控件位于我的标题下面。

http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format

问题出现在#content-container的

中。

当我去掉overflow时，音量控件就会移动到我的标题上面（这正是我想要的）。

但我不能放弃overflow，否则就必须使用其他方法来控制浮动，除非真的需要，否则我不想这样做。

有人有解决这个问题的方法吗？

- PeeHaa

---

我得到了一个404错误...可能是因为“localhost”不是有效的顶级域名。 - sdleihssirhc

抱歉，那是我的开发机。链接已修复。谢谢。 - PeeHaa

Answer 1

您已经选择了一个答案，但是有一些问题需要指出。首先，清除 <br> 不是语义化的，它会添加额外的代码，并且可能会在某些浏览器中引起问题。

其次，现在不应该使用溢出方法来清除浮动，因为 CSS3 正变得越来越普遍。它会导致任何显示效果超出容器边界的新参数出现问题。如果您使用溢出方法，则至少会截断盒子和文本阴影。

您真的应该使用 clearfix 方法。它很容易实现，不需要任何额外的标记，并且不会导致任何 CSS3 属性出现问题。

好好阅读 -

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

- Brent Friar

---

我没有考虑清除 <br>，而是使用已存在的另一个 div 进行清除。我已经阅读了你提到的网站，并且它们有一些有效的观点。可惜这是一段很丑陋的代码:( 我将在一些网站/浏览器上对其进行测试。并保持更新。 - PeeHaa

<br> 的提及更多是针对 Vap0r 的评论。不过，你会发现 clearfix 很有效，并且实现起来很简单。 - Brent Friar

Answer 2

你可以给 snippets div 添加 clear:both。你已经在里面添加了元素，我认为你不希望它围绕导航栏包裹，因此这不仅仅是为了增加无意义的元素/类。

- sdleihssirhc