overflow:hidden具有三个作用,有查出边框部分隐藏的作用,清除浮动的作用,解决边框塌陷的作用。
1.超出变宽部分隐藏
大家来看一下下面的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 50px; overflow: hidden; } span{ font-size: 20px; } </style> </head> <body> <div> <span>超出隐藏</span><br> <span>超出隐藏</span><br> <span>超出隐藏</span><br> </div> </body> </html>
代码效果
大家可以看到第三行的span标签被隐藏了
文本还可以设置超出部分用省略号表示
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 60px; height: 100px; overflow: hidden; /* 文本不能进行换行 */ white-space: nowrap; /* 文本溢出部分用省略号表示 */ text-overflow: ellipsis; } span{ font-size: 20px; } </style> </head> <body> <div> <span>超出隐藏</span><br> <span>超出隐藏</span><br> <span>超出隐藏</span><br> </div> </body> </html>
结果
下面设计到一个overflow的用法:overflow:hidden溢出隐藏
overflow:scroll显示滚动条
overflow:auto超出显示滚动条
2.清除浮动
当不给父级元素设置高度的时候,其内部元素浮动后会导致下面的元素顶山去,这是因为子元素浮动后,子元素脱离标准流,不占位,父元素检测不到子元素的大小,从而高度为0.
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
background-color: yellow;
}
.son{
width: 50px;
height: 100px;
float: left;
background-color: turquoise;
}
.xiamian{
width: 200px;
height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<div class="xiamian"></div>
</body>
</html>
效果如下
给父元素 加入overflow:hidden之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
background-color: yellow;
overflow: hidden;
}
.son{
width: 50px;
height: 100px;
float: left;
background-color: turquoise;
}
.xiamian{
width: 200px;
height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<div class="xiamian"></div>
</body>
</html>
效果如下
可以看到下面的div不会再占据上面div的位置
3.解决外边距塌陷问题
当给子元素设置magic-top的时候父元素也会下降
看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 200px;
background-color: yellow;
}
.son{
width: 50px;
height: 100px;
margin-top: 100px;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
效果如下
给父元素加上overflow:hidden之后
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 200px;
background-color: yellow;
overflow: hidden;
}
.son{
width: 50px;
height: 100px;
margin-top: 100px;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
效果如下