CSS属性overfolw：hidden的理解与用法

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

weixin_44354089

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

阅读量1.7k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44354089/article/details/106190201

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

overflow:hidden可以溢出隐藏和清除浮动，这两种作用对应不同的情况
溢出隐藏：当页面出现溢出时就可以，把溢出的内容隐藏起来

1.出现溢出

溢出隐藏

2.消除浮动：在其内部子元素出现浮动时，可消除浮动

<style>
        .test-title{
            background-color: orange;
        }
       
        .left{
            float: left;
            width: 200px;
            background-color: pink;
        }
        .right{
            float: left;
            background-color: aquamarine;
        }
        .test-container{
            background-color: #fff;
            /* overflow: hidden; */
        }
    </style>
</head>
<body style="margin: 10px;">
    <div class="test-title">头部信息</div>
    <div class="test-container">  
        <div class="left">左侧菜单</div>
        <div class="right">右侧内容</div>
    </div>
</body>

我们设置了test-container的背景色为灰色，但是空白处却不是灰色，原因是因为左侧菜单，右侧菜单内容设置了float:left，左侧菜单，右侧菜单就属于浮动流了，他们不属于文档流，test-container就没有高度，背景色就显示不出来

但是当我们将test-container设置了overflow:hidden时，这个属性可清除其子元素的浮动，就可以把左侧菜单，右侧菜单内容当做文档流，test-container就有了高度，背景色就显示出来了

weixin_44354089

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS属性overfolw：hidden的理解与用法

overflow:hidden可以溢出隐藏和清除浮动，这两种作用对应不同的情况溢出隐藏：当页面出现溢出时就可以，把溢出的内容隐藏起来1.出现溢出溢出隐藏2.消除浮动：在其内部子元素出现浮动时，可消除浮动<style> .test-title{ background-color: orange; } .left{ float: left; .
复制链接

扫一扫