什么是溢出
当使用DIV+CSS布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div。默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:100px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。我们可以通过设置父div的CSS属性——overflow来对子div进行控制。这里使用来隐藏子元素溢出的部分。
父元素高度确定
父元素高度确定时，设置overflow: hidden，会隐藏子元素超出父元素宽高的内容，且被隐藏的元素不占位。
父元素高度不确定
如文章开头所说，父元素高度为auto，默认情况下，子元素会超出父元素的束缚。但是如果设置了定位，可能导致不同的情况。
我们先来看下面一段代码：
看看表现：
显然，子元素溢出的内容并没有被隐藏。原因是给子元素设置了绝对定位。绝对定位元素相对的元素是它最近的一个祖先，该祖先必须满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。因此，子元素此时相对于body定位，溢出内容不会被隐藏。
我们再来看下面一段代码：
在浏览器打开HTML文件，可以看到页面上一片空白😨！！！原因是：子元素脱离了文档流，父元素并没有被撑开——此时父元素高度为0。且子元素相对于父元素定位，此时设置... ...so，子元素被完全隐藏了。
因此，如果想要达到子元素定位为absolute，溢出内容被隐藏的效果，需要给父元素设置宽高，且定位设置为relative/absolute，读者可自行尝试。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/12167.html