overflow:hidden用法

最新推荐文章于 2024-01-14 20:32:01 发布

Henry_Jing

最新推荐文章于 2024-01-14 20:32:01 发布

阅读量9.2k

点赞数 4

分类专栏： css 文章标签： css overflow

本文链接：https://blog.csdn.net/JCY1009015337/article/details/92405655

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近学习css的overflow元素的hidden属性，总结2点作用：

1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏

2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

作用1示例:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width: 500px;
                border: 1px solid red;
                height: 50px;
                overflow: hidden;
            }
            #div2{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
</html>

效果：

作用2示例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width: 500px;
                border: 1px solid red;
                overflow: hidden;
            }
            #div2{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
</html>

效果：

如果#div1不加overflow:hidden，则运行效果如下：

当然为了使子元素浮动后父元素依旧有高度，可以设置#div1的高度height或者也增加float:left。

Henry_Jing

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
overflow:hidden用法

最近学习css的overflow元素的hidden属性，总结2点作用：1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。作用1示例:<!DOCTYPE html>&lt...
复制链接

扫一扫