解决高度塌陷问题——Clear属性、after伪类

最新推荐文章于 2023-10-12 23:01:42 发布

一只天马行空的飞猪

最新推荐文章于 2023-10-12 23:01:42 发布

阅读量588

点赞数 2

分类专栏： CSS学习笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46149357/article/details/119060232

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

clear属性

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear的作用：

清除浮动元素对当前元素所产生的影响

可选值：

1）left 清除左侧元素对当前元素的影响

2） right 清除右侧浮动元素对当前元素的影响

3） both 清除两侧中最大影响的那一侧

原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受到其他元素的影响。

设置浮动，此时box2被box1盖住

   <style>
        .box1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfc;

        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(62, 230, 104);
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <!-- <div class="box3">box3</div> -->
    <div class="box2">box2</div>



</body>

添加clear:left;


        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(62, 230, 104);
            clear: left;
        }

添加box3,使得box2受到box1和box3两方面的影响，而clear:left; 只解决了box1

  <style>
        .box1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfc;

        }
        .box3{
            float: right;
            width: 300px;
            height: 300px;
            background-color: rgb(153, 245, 32);

        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(62, 230, 104);
            clear: left;
            clear: right;
        }

添加clear : right;

clear : both;效果和clear : right; 一样，因为box3对box2的影响更大。

after伪类——较好的解决高度塌陷问题

引入：

设置两个盒子，box2把box1撑起来

    <style>
        .box1{
            border:rgb(250, 96, 24) solid 5px;
        }

        .box2{
            height: 300px;
            width: 300px;
            background-color: yellow;
        }


    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
    <div class="box3"></div>
    
</body>

状态如下：

给box2设置浮动，高度塌陷

        .box2{
            float: left;
            height: 300px;
            width: 300px;
            background-color: yellow;
        }

为了解决塌陷，在box1内置box3把box1撑起来

    <style>
        .box1{
            border:rgb(250, 96, 24) solid 5px;
        }

        .box2{
            float: left;
            height: 300px;
            width: 300px;
            background-color: yellow;
        }

        .box3{
            background-color: yellowgreen;
             /* 用clear属性使得box3的外边距为300px，box3就在box2下面，撑起box1*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3">^^^^</div>
    </div>
    
    
    
</body>

效果如下：

删除颜色和不必要的字，达到了撑起的效果

这些处理中设计的结构是在HTML中进行的，为了把它转移到CSS上，采用伪类after，after表示元素的最后，这样就无需修改HTML里面的代码。

注意：after是行内元素，因此要转换成块元素


        box1::after{
            /* 转换成块元素 */
            content: "";
            display: block;
            clear: both;
        }

全部代码如下：

   <style>
        .box1{
            border:rgb(250, 96, 24) solid 5px;
        }

        .box2{
            float: left;
            height: 300px;
            width: 300px;
            background-color: yellow;
        }
        /*
        .box3{
            /* background-color: yellowgreen; */
             /* 用clear属性使得box3的外边距为300px，box3就在box2下面，撑起box1
            clear: both;
        }*/

        .box1::after{
            /* 转换成块元素 */
            content: "";
            display: block;
            clear: both;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
    
    
    
</body>

效果如下：

一只天马行空的飞猪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决高度塌陷问题——Clear属性、after伪类

clear属性如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响clear的作用：清除浮动元素对当前元素所产生的影响可选值：1）left 清除左侧元素对当前元素的影响2） right 清除右侧浮动元素对当前元素的影响3） both 清除两侧中最大影响的那一侧原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受到其他元素的影响。设置浮动，此时box2被box1盖住 &lt.
复制链接

扫一扫