overflow: hidden multiple functions
1. Solve the problem of margin collapse on margin-top.
Before solving,
add overflow: hidden to the parent element;
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 300px;
height: 300px;
background-color: red;
/* 解决margin-top塌陷 */
overflow: hidden;
}
.box1 {
margin-top: 60px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
After the solution is solved
2. The overflow hides the part that exceeds the content to hide
Code demo after unresolved before resolving
<style>
.box {
display: inline-block;
width: 177px;
height: 20px;
background-color: pink;
/* 解决超出部分给隐藏起来 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
我们的征程是星辰大海 我们的征程是星辰大海
</div>
</body>
After solving
3. It is used to clear the effect of floating, because the element will float on top of the standard element after floating, and the floating element used does not retain the original position.
Before
solving the solution, add overflow: hidden;
<style>
.box {
overflow: hidden;
}
.box1,
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
background-color: red;
}
.box3 {
width: 100%;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
After solving
