1. A brief introduction to the properties of the overflow element.
As w3c introduced...overflow has a total of five properties.
overflow:visible; the default value, if the content exceeds, it will be rendered outside the box.
overflow:scroll; Exceeded content will be displayed in the form of scroll bars.
overflow:auto; adaptive, if the content exceeds, it will be automatically displayed with a scroll bar for easy viewing.
overflow:inherit; inherits the overflow property of the parent class.
overflow:hidden; the part beyond is hidden and invisible.
This time we mainly discuss the overflow:hidden; attribute.
2. The general application of overflow: hidden;.
(1) The function of the overflow: hidden; attribute is explained below through a simple example.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color : red;
}
(set the width of the parent class to 200px, height to 200px, and background color to red)
.green {
width: 100px;
height: 400px;
background-color: green;
}
(set the subclass width to 100px, height to 400px, and background color to green)
</style>
</head>
<body>
<div class="red">
<div class="green "></div>
</div>
</body>
</html>
由效果图很明显可以看出，绿色子类超出了红色父类300px。
（2）这时我们给红色父类设置overflow：hidden；属性。效果如下：
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow:hidden;（給红色父类设置overflow属性）
}
.green {
width: 100px;
height: 400px;
background-color: green;
}
</style></head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
(Rendering): 
It can be seen from the figure , the 300px beyond the green subclass is hidden
(3) Below we set the height of the red parent class to auto.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: auto; (the red The height of the parent class is set to adaptive)
background-color: red;
overflow: hidden;
}
.green {
width: 100px;
height: 400px;
background-color: green;
}
</style></head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
(effects) as follows: 
Obviously, the red parent The height of the class is propped up by the height of the subclass after setting the overflow: hidden; and auto combination properties.
This is the most basic use of the overflow: hidden; attribute in practical applications.
At this time, you will naturally mutter in your heart, for a long time, who does not know this? Don't worry, it's just a warm-up.
3.overflow:hidden; "hidden" is invalid.
(1) We add another black parent class to the outer layer of the parent class, and then give the black grandparent class relative positioning, and the subclass absolute positioning. Come, let's see the effect.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color : red;
overflow: hidden;
(The renderings) are as follows: Do you feel very different from what you expected when you see the renderings? How could this be? What is the reason? What makes it "hidden" invalid? Remember how the code was written? We give relative positioning to the black grandparent class. The parent class does not have positioning but only sets the overflow: hidden; attribute, but sets absolute positioning for the subclass to free the subclass from the constraints of the parent class and the text flow. Originally we expected that the excess part of the green subclass was hidden by the red parent class, but it was not, and it exceeded the grandparent class.
(2) Let's explore by setting overflow: hidden; for the grandparent class.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color : red;
overflow: hidden;
}
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}
.black{
width: 300px;
height: 300px;
overflow: hidden; (add to grandparent class beyond the hidden property)
background-color: black;
position: relative;
}
</style></head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html >
(Rendering) as follows: 
We see that the naughty green subclass attribute is finally hidden after the grandparent class sets relative positioning and overflow: hidden; but we find that it is only hidden relative to the relatively positioned black grandparent class The excess part is displayed, but the hidden element attribute of the excess part of the parent class is not implemented, so it can be seen that it is not a very obedient child.
How to do it? Disobedient children how to do? It's simple, just hit it off.
(3) Let's take a look at the relative positioning properties of the parent class.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color : red;
overflow: hidden;
height: 400px;
position: absolute;
background-color: green;
} (subclass absolute positioning)
.black{
width: 300px;
height: 300px;
overflow: hidden;
background-color: black;
position: relative;
} (grandparent class also relative positioning)
</style></head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html >
(effect image) as follows; 
hahaha... see no, the naughty green subclass is finally obedient after the relative positioning of the red parent class is set, it hides its little tail that goes beyond.
All right. Below we summarize.
In the subclass, parent class, grandparent class, grandfather class, etc. are not positioned (that is, the default browser positioning), the parent class is set to overflow: hidden; the attribute takes effect, that is, the excess part of the subclass will be hidden.
However, as long as the subclass is absolutely positioned, and the overflow:hidden; attribute is to take effect for the subclass, then the parent class of the overflow:hidden; attribute must be positioned accordingly (that is, in addition to the browser's default positioning) before it will take effect, otherwise the hiding will fail. If both the parent class and the grandparent class have overflow:hidden; and positioning attributes set, the parent class has the highest priority, and so on.
今天就先说到这里，欢迎补充！(还不懂的小伙伴可以复制代码试验哦！)