零基础学ui：html5中的overflow:hidden的秘密用处？

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


1.使用overflow：hidden隐藏溢出

   当父div拥有固定的高度时，比如height:500px,我们使用overflow:hidden来隐藏溢出。

   当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:500px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。我们可以通过设置父div的CSS属性——overflow来对子div进行控制。这里使用overflow:hidden来隐藏子元素溢出的部分。

2.使用overflow：hidden清除浮动

   当父元素的高height:auto时，我们使用overflow：hidden清除浮动。

   当我们为div1和div2加上一个属性：float:left后，我们会发现：背景色为黑色父div消失了，这是因为： 浮动的元素脱离文档元素， 不占据空间。 不浮动的元素会直接无视掉这个元素：父div无视了自己的两个孩子，其高度为0（因为我们没有设置父div的高度），所以父div没有显现。
   现在我们知道overflow:hidden这个属性的作用是隐藏溢出，但他还有一个作用是清除浮动。