什么是溢出
当使用DIV+CSS布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div。默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:100px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。我们可以通过设置父div的CSS属性——overflow来对子div进行控制。这里使用overflow:hidden来隐藏子元素溢出的部分。
父元素高度确定
父元素高度确定时，设置overflow: hidden，会隐藏子元素超出父元素宽高的内容，且被隐藏的元素不占位。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
width: 50px;
height: 50px;
overflow: hidden;
}
#son{
width: 100px;
height: 100px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我的宽度是100px</div>
</div>
<p>检测占位</p>
</body>
</html>
父元素高度不确定
如文章开头所说，父元素高度为auto，默认情况下，子元素会超出父元素的束缚。但是如果设置了定位，可能导致不同的情况。
我们先来看下面一段代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
overflow: hidden;
}
#son{
position: absolute;
width: 100px;
height: 100px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我的宽度是100px</div>
</div>
</body>
</html>
看看表现：
显然，子元素溢出的内容并没有被隐藏。原因是给子元素设置了绝对定位。绝对定位元素相对的元素是它最近的一个祖先，该祖先必须满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。因此，子元素此时相对于body定位，溢出内容不会被隐藏。
我们再来看下面一段代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father{
position: relative;
overflow: hidden;
}
#son{
position: absolute;
width: 100px;
height: 100px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我的宽度是100px</div>
</div>
</body>
</html>
在浏览器打开HTML文件，可以看到页面上一片空白😨！！！原因是：子元素脱离了文档流，父元素并没有被撑开——此时父元素高度为0。且子元素相对于父元素定位，此时设置overflow: hidden... ...so，子元素被完全隐藏了。
因此，如果想要达到子元素定位为absolute，溢出内容被隐藏的效果，需要给父元素设置宽高，且定位设置为relative/absolute，读者可自行尝试。
