Question

给我详细讲解一下overflow:hidden的用法？

hidden是隐藏，到底怎么隐藏呢？是超出的部分被剪裁掉了？被谁裁掉了呢？什么情况下会用到overflow：hidden啊？求大神给我讲讲，有图示最好！感激不尽！
之前写过一个div，本来是图一的结构，后来加了overflow：hidden之后就变成图二那样了，这是问什么呢？而且《p》里面的内容并没有少，而是自动重新排列了……头像是float：left的。。。

Answer 1

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#box{
width:500px;
background:#000;
height:500px;
}
#content {
float:left;
width:600px;
height:600px;
background:red;
}
给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。
我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。
打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||） OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB内，JJ的大小自然又会影响到BB的大小。这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给box这个div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
火狐里面解释的就是这个意思（float的属性就是立体漂浮，IE7和火狐都是这个意思了，IE6是不管外面的层的属性content 会直接撑开box的），所以才在 height的auto属性中加入！important这个值！让他在IE7中优先执行这个命令儿忽略overflow：hidden;这个命令！

追问

你的意思是hidden的同时会清除浮动是么？

追答

是啊！
可以看下下面代码：

使用这个属性后，就可以使外边的div层适应内部元素的高度了！

Answer 2

当你已经定了div的宽和高，但觉得你的图片有点过大了，但又不想去裁切，你就用overflow：hidden就搞定了

Answer 3

把多出的地方隐藏在，没有裁掉

Answer 4

想说的一点是，浮动没有真正意义上的清除，只是因为触发了BFC，这个隔离的环境的特性是互不干扰，因此即使设置了浮动，也不会文字围绕，不然就不满足隔离的特性了，因此看起来好像是清除浮动了。当然，可以触发BFC的不只是这一种方法，具体的可以看看这篇文章：网页链接【关于CSS中设置overflow属性的值为hidden的相关理解】