overflow：hidden与clear：both

来源：互联网发布：淘宝代理兼职编辑：程序博客网时间：2024/04/28 17:28

clear是子模块之间限定的，如下：
<div id="a">

<div id="1"></div>
<div id="2"></div>
</div>
1和2之间，用clear来限定。
而overflow:hidden是父模块对子模块来用的。就是a对于1和2模块的限定。

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？下面来详细的阐述一下。
<div id="out">
<div id="in"></div>
</div>

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

#out{ width:50px; background:#000; height:50px;}

#in{ float:left; width:60px; height:60px; background:red;}

可以看到，我给in这个id加了一个浮动，我们常规的理解是，我们允许in这个id的div的右边出现其他的内容，只要它的宽度不超过out这个div和in这个div的剩余值。

如果div out中还包含其他的div，我不允许它出现在in的右侧，我们则用样式clear:both指定这个div，不允许它浮动在in右侧。

这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当in这个div的宽度和高度都大于out这个div的时候，out并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是50。

这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给out这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出，给out加上这个属性后，我们的in的宽高自动的被隐藏掉了。另外，我们再做一个试验，将out这个div的高度值删除后，我们发现，out的高度自动的被in这个div的高度值给撑开了。

说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！

也就是说，当in这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了out这个div，也就是说，此时的in的宽高是多少，对于已经脱离了的out来说，都是不起作用的。

OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给out这个div加上overflow:hidden这个属性的时候，其中的in等等带浮动属性的div的在这个立体的浮动已经被清除了。

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

当我们没有给out这个div设置高度的时候，in这个div的高度，就会撑开out这个div，而在另一个方面，我们要注意到的是，当我们给out这个div加上一个高度值，那么无论in这个div的高度是多少，out这个高度都是我们设定的值。而当in的高度超过out的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义

0 0