溢出，漂浮，高度混乱

Question

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

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

疑惑：

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

Answer 1

这是因为您的li已浮动。如果您没有overflow: hidden;，则li与ul的上下文不同，因此ul不会包围它们。

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

Answer 2

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

即可

 #siteNav ul {
overflow: hidden;
}

因为在使用溢出时建立新的块格式化上下文，然后可见其他任何内容（链接到w3.org specs）。 by-ChristopheD

read this

Answer 3

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

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