在我们学习css的过程中,会发现碰到了好几次overflow:hidden,overflow这个属性非常神奇,功能也比较多,下面我就给大家介绍一下
一.解决外边距的塌陷问题
什么叫外边距塌陷,举个例子吧:对于上下并列的两个div而言,上面div的margin-bottom和下面div的margin-top会发生边界重叠,编辑器会选择两者margin的最大值作为显示,所以我们视觉上的感觉就是发生了塌陷。
当然解决外边距塌陷问题还有其他方法,overflow:hidden只是其中一种,例如:
1.给它的父元素设置边框(为了不影响布局,可以设置为透明)
2.给它的父元素设置padding值
二.清除浮动
我们发现,当我们无法准确计算所有子元素的高时,一般会选择不给其父元素设置高度,我们想要的效果是让子盒子去撑大父盒子,从而使子,父元素的高保持相同。
这时,我们可以用overflow:hidden来为父元素清除浮动;还有一种方法就是给父元素也添加浮动,也可以达到相同的效果
三.隐藏溢出元素
默认情况下,父div的高度是auto,它可以被子盒子任意得撑大,但是如果父div有自己的高度,并且子div的高度超过了父div的高度,那么超出的部分就会在父盒子外部显示,我们称这种情况为溢出。这时,可以给父div的css属性设置overflow:hidden来隐藏子元素溢出的部分
好了,关于overflow:hidden的功能就介绍到这里吧