您现在的位置是:ui设计学习网 > UI疑惑解答 > 在职ui设计师 > 在职ui设计师

html5中的overflow:hidden的秘密用处?

2020-03-27 22:02在职ui设计师 人已围观

简介overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个...

  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这个属性的作用是隐藏溢出,但他还有一个作用是清除浮动。

如果你觉得本站还不错,可以通过扫码支付打赏哦,感谢!

站点信息

  • 干货分享121篇文章
  • 你喜欢的标签标签云
  • 微信公众号:扫描关注我们,领取更多学习资料