overflow：hidden作用

@听雨声

已于 2022-06-13 14:58:17 修改

阅读量2w

点赞数 21

文章标签： css3 css html

于 2022-04-29 20:35:47 首次发布

本文链接：https://blog.csdn.net/m0_64380162/article/details/124500198

版权

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>

效果如下

@听雨声

关注

21
点赞
踩
77

收藏

觉得还不错? 一键收藏
6
评论
overflow：hidden作用

overflow：hidden具有三个作用，有查出边框部分隐藏的作用，清除浮动的作用，解决边框塌陷的作用。1.超出变宽部分隐藏大家来看一下下面的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫