overflow:hidden这个CSS样式是大家常用到CSS样式但是大多数人对这个样式理解仅仅局限于隐藏溢

出而对于清除浮动这个含义不是很了解
提到清除浮动我们就会想到另外个CSS样式:clear:both我相信对于这个属性理解大家都不成问

题但是对于“浮动”这个词到底包含什么样含义呢？我们下面来详细阐述下

<div id="wai">
<div id="nei"></div>
</div>

这是个常用div写法下面我们来书写样式大家可以在DMX中自己做试验

#wai{ width:500px; background:#000; height:500px;}

#nei { float:left; width:600px; height:600px; background:red;}

可以看到我给nei这个id加了个浮动我们常规理解是我们允许nei这个iddiv右边出现其他内

容只要它宽度不超过wai这个div和nei这个div剩余值

如果div wai中还包含其他div我不允许它出现在nei右侧我们则用样式clear:both指定这个div不允

许它浮动在nei右侧

这些在ie6里面是正确但是在火狐或者其他浏览器里面我们发现问题并非如此简单我们发现当nei

这个div宽度和高度都大于wai这个div时候wai并没有被内撑开而是依旧显示为我们指定宽高在我

例子中都是500

这个时候我不理解了我搜索了很多资料但是都没能理解这是为什么直到看到别人在类似情况下

给wai这个div加了个overflow:hidden这个属性解决了这个问题

我们直到overflow:hidden这个属性作用是隐藏溢出给wai加上这个属性后我们nei宽高自动被

隐藏掉了另外我们再做个试验将wai这个div高度值删除后我们发现wai高度自动被nei这

个div高度值给撑开了

说到这里我们再来理解下“浮动”这个词含义我们原先理解是在个平面上浮动但是通过这

个试验我们发现这不仅仅是个平面上浮动而是个立体浮动！

也就是说当nei这个div加上浮动这个属性时候在显示器侧面它已经脱离了wai这个div也就是说

此时nei宽高是多少对于已经脱离了wai来说都是不起作用打个形象比喻就是当JJ脱离BB

时候JJ大小对于BB是没有撑开作用(有点少儿不宜感觉-_-|||)

OK当我们全面理解了浮动这个词含义时候我们就理解overflow:hidden这个属性中解释清除

浮动是什么意思了也就是说当我们给wai这个div加上overflow:hidden这个属性时候其中nei等等

带浮动属性div在这个立体浮动已经被清除了就好比JJ又进入了BB内JJ大小自然又会影响到BB

大小

这就是overflow:hidden这个属性清除浮动准确含义

当我们没有给wai这个div设置高度时候nei这个div高度就会撑开wai这个div而在另个方面我

们要注意到是当我们给wai这个div加上个高度值那么无论nei这个div高度是多少wai这个高度都

是我们设定值而当nei高度超过wai高度时候超出部分就会被隐藏这就是隐藏溢出含义！