CSS溢出问题
我在网站上使用 overflow:hidden 来控制结束浮动。
到目前为止，它一直运行良好。
我知道有几种不同的方法可以结束浮动，但溢出技巧通常效果最好。
然而这次我做不到。
如果您查看下一页并尝试调整音量，您会发现音量控制位于我的标题下方。
http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format
问题出在 #content-container div
当我删除 overflow 时，音量控制会越过我的标题（是我想要的）。
但我不能只是放弃溢出，否则我必须找到另一个解决方案来控制浮动，除非确实有必要，否则这不是我想做的事情。
有人有解决这个问题的办法吗？
I use overflow: hidden on my site to get control over ending floats.
Which up to now always have worked perfectly.
I know there are several different approaches of ending floats but the overflow trick normally works best.
However this time I cannot get it right.
If you look at the following page and try to adjust the volume you'll see that the volume control goes under my header.
http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format
The problem is in the #content-container div
When I remove the overflow the volume control goes over my header (which is what I want).
But I can't just drop the overflow or I have to result to another solution to control the floats, which is not something I want to do unless REALLY necessary.
Anybody has a solution to this problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您已经选择了答案，但有一些问题需要指出。首先，清除
接下来，既然 CSS3 变得越来越流行，你就不应该使用清除浮动的溢出方法。它会导致任何显示容器边界之外效果的新参数出现问题。如果您使用溢出方法，至少框和文本阴影都会被切除。
您确实应该使用clearfix 方法。它实现起来很简单，不需要任何额外的标记，并且不会导致任何 CSS3 属性出现问题。
好读 -
http://perishablepress.com/press/2009/12 /06/new-clearfix-hack/
http://fordinteractive .com/2009/12/goodbye-overflow-clearing-hack/
You've already selected an answer, but there are some issues that should be pointed out. First, clearing a
<br>is not semantic, it adds extra code and can cause issues in some browsers.Next, you should not use the overflow method of clearing floats now that CSS3 is becoming more prevalent. It causes issues with any new parameters that display effects outside the boundaries of the container. At a minimum both box and text shadows will be cut off if you are using the overflow method.
You really should use the clearfix method. It's simple to implement, does not require any additional mark up, and does not cause issues with any CSS3 properties.
Good reading -
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
您可以提供
snippetsdivclear:both。无论如何，你都有这个元素，我假设你不希望它环绕导航，所以它不仅仅是添加无语义的元素/类。You could give the
snippetsdivclear:both. You have the element in there anyway, and I assume you wouldn't want it to wrap around the nav, so it's not just adding unsemantic elements/classes for the heck of it.