overflow:hidden用法,不只是隐藏溢出内容

最新推荐文章于 2022-07-26 08:59:18 发布

Taojunhao

最新推荐文章于 2022-07-26 08:59:18 发布

阅读量808

点赞数

分类专栏： CSS 文章标签： CSS

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

overflow：hidden是大家常用的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            /*height: 50px;*/
            padding: 10px 20px 20px 10px;
            background: red;
            margin: 0 auto;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1" >
    <div id="div2" ></div>
    </div>
</body>
</html>

当父div没有规定height值，子div浮动后，父div只剩下padding-top+padding-bottom的30px.
如何让子div再次将父div的高度撑开呢？固然将父div也浮动起来是比较常用的做法，其实还可以使用overflower:hidden来清除浮动带来的影响。

#div1{
    width: 200px;
    /*height: 50px;*/
    padding: 10px 20px 20px 10px;
    background: red;
    margin: 0 auto;
    <strong>overflow: hidden;</strong>
}

效果如下：
在这里插入图片描述
当然，我们以前用的最多的还是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出，如下所示。

#div1{
    width: 200px;
    height: 50px;
    padding: 10px 20px 20px 10px;
    background: red;
    margin: 0 auto;
    overflow: hidden;
}

在这里插入图片描述

Taojunhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow:hidden用法,不只是隐藏溢出内容

overflow：hidden是大家常用的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #div1{ ...
复制链接

扫一扫

专栏目录