Question

overflow:hidden 的疑问

w3c上解释说是溢出的话隐藏它。 但我觉得我下面的这个例子和隐藏就没有关系。
代码（我都加了背景， 好区分）
.wrap
{
overflow: hidden;
}

<div class="wrap"> <h1>My Second Website</h1> <div class="content"> </div> <aside>
//... </aside> </div>

当没有overflow: hidden;的时候， 显示的是这样:

加上overflow: hidden;， 显示的是这样

我搞不明白这里什么东西溢出了， 好像没什么溢出吧， 隐藏什么东西？
这个是overflow: hidden

这个没有设置overflow

css:

.wrap{ min-width: 20px; width: 80%; margin: auto; background: green; overflow: auto;}.content, aside{ height: 600px;}.content{ background: red; float: left; width: 70%;}aside{ background: brown; float: right; width: 30%;}aside ul{ list-style: none; padding-left: 0;}





Answer 1

overflow:hidden只有在定义了元素的宽高之后才能看到效果的，在没有定义宽高的情况狂下，元素的宽度默认是100%；而高度则是自适应内容，所以自然也就不存在overflow的情况了。如果你给wrap定义一个高度，例如height:10px;之类的，再看看效果，就会发现多出来的部分被隐藏了。

追问

那为什么我图片中的例子
.wrap
{
overflow: hidden;

}
加上overflow： hidden; 就可以显示出更多的部分？ 这个和hidden有什么关系？
这样做的原理是什么？

追答

呃。。。这个是浏览器渲染的问题，很难解释的，在不同浏览器里面的表现不一样，有的浏览器会多出一些东西来，有的又不会，就像IE6不认div的hover伪类，但是其他浏览器又认一样的。我想大概在没有设置overflow:hidden的情况下，某些浏览器会认为元素的高度等于里面文本的高度，而不判断元素的实际高度；如果设置了overflow:hidden以后，浏览器会先判断元素的实际高度，即文本高度加容器的padding高度，这样的话原来不存在的一些空间也会被填充了，不过这也只是猜测罢了，一般在定义overflow的时候，都是会加上高度值的，在这种情况下不论什么浏览器都是可以正确解析的。

Answer 2

能看一下所有样式么？

追问

完整界面截图补充上了

追答

• 是这样的，一个父级里面有一个浮动元素时，由于浮动元素脱离文档流，所以该父级时不会被浮动元素撑开的。而给父级元素设置overflow属性，能清除浮动元素的影响。

• 你不设置父级的overflow属性时，父级只被<h1>撑开，所以只有<h1>的背景是绿色的。

  你设置了父级的overflow属性后，父级也会被浮动元素撑开。

也就是说不说什么溢出不溢出，只是父级的背景覆盖范围而已。