css中:overflow:hidden的作用

overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏。

1.我们给一个父元素,里面有两个子元素


2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左浮动。

.

3.运行结果如下:我们发现父元素的背景色并没有显示出来


4.给父元素加上overflow:hidden


5.运行结果:父元素的背景色被显示出来


6.分析原因:父元素未被撑开

当子元素浮动时,它的父元素不是不在了,因为父元素的高height:auto为自动值,就是根据里面的内容自动设置高度,由于子元素设置了左浮动,已经浮动起来了属于浮动流,不在普通流中,因此父元素普通流中的内容为空,所以没有高度。解决方法就为给浮动块的父元素设置overflow:hidden;当然还有其他方法,这个最为简便。

7.w3school中解释如下,简单的说overflow:hidden的意思就是超出部分隐藏

猜你喜欢

转载自blog.csdn.net/qq_41985171/article/details/80001674