溢出，浮动，高度混乱答案

【问题标题】：Overflow, float ,height Mess溢出，浮动，高度混乱
【发布时间】：2012-09-20 13:21:48
【问题描述】：

我正在使用来自网站的导航设计 - CSSDECK。

我做了一些修改，this 是我的代码。

疑问：

为什么#siteNav 和#siteNav ul 不环绕lis。我在#siteNav 和#siteNav ul 中使用了height:auto。我所知道的是auto 意味着浏览器将相应地决定高度。但这并没有发生。 为什么？
如果我在#siteNav 或#siteNav ul 中的任何一个中执行overflow:auto or hidden。然后该块将自己包裹在lis 周围。为什么要使用overflow 这样做？

【问题讨论】：

【解决方案1】：

这是因为您的lis 是浮动的。当您没有overflow: hidden; 时，lis 与ul 处于不同的上下文中，因此ul 不会环绕它们。

overflow: hidden; 是一个通用的、已知的容器调整大小以适应其 floated 内容的修复方法，但还有其他方法 - 用于广泛参考，see this。

【讨论】：

是的！我也有同样的感觉，这就是为什么我把它命名为float mess。但正如你所说，li s 处于不同的环境中。你能解释或分享任何简单解释这种情况的资源吗？
@knoxxs 上下文只是“浮动上下文”。非浮动元素是一种“看不到”的浮动元素。有关几种方法的更多说明，请参阅我的更新答案。

【解决方案2】：

只需将overflow: hidden; 应用到您的#siteNav ul

 #siteNav ul {
overflow: hidden;
}

因为你在使用溢出时建立了一个新的块格式化上下文，然后可见（链接到w3.org specs）。 作者：ChristopheD

【讨论】：

【解决方案3】：

这是因为 lis 是浮动的。任何包含浮动元素的包装器都不会包装内容，除非溢出：隐藏应用于包装器。这是浮动元素的常见浏览器问题。此外，overflow:hidden 并不能在所有浏览器中解决此问题。搜索“clearfix”以查看针对此问题的跨浏览器修复。

顺便说一句，你不需要 height:auto ，块元素默认有宽度和高度自动。如果里面没有浮动元素，那么您会看到预期的行为。

【讨论】：