clear属性的作用

最新推荐文章于 2024-02-23 13:48:48 发布

因渺小而伟大

最新推荐文章于 2024-02-23 13:48:48 发布

阅读量3.5k

点赞数 5

分类专栏： HTML 文章标签： clear的作用 clear与float的区别

本文链接：https://blog.csdn.net/qq_43205282/article/details/103387685

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

clear属性用于在块级元素中清除浮动效果的其值可以设置成：

clear：both 清除左右两边的的浮动
clear：left 清除左边的浮动
clear： right 清除右边浮动
clear： none 左右都有浮动效果

与float的区别不同的是，clear是清除float的之前的设置效果重新在新的一行生成其设置的值的效果

演示代码：

<style>
        body{
            width: 500px;
            height: 400px;
            border: 1px solid #000;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 255, 255);
            text-align: center;
            line-height: 100px;
            margin: 10px  10px;
            float: left;

        }

        .div2 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(10, 200, 255);
            text-align: center;
            margin: 10px;
            float: left;
        }

        .div3 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(90, 0, 255);
            text-align: center;
            margin: auto 10px;
            clear: left;
            float: right;

        }

        .div4 {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(0, 0, 255);
            text-align: center;
            margin: auto 10px;
            clear: right;
            float: left;
        }
    </style>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>
<div class="div4">D</div>
</body>

结果：

在这里插入图片描述

因渺小而伟大

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
clear属性的作用

clear属性用于在块级元素中清除浮动效果的其值可以设置成：clear：both 清除左右两边的的浮动clear：left 清除左边的浮动clear： right 清除右边浮动clear： none 左右都有浮动效果与float的区别不同的是，clear是清除float的之前的设置效果重新在新的一行生成其设置的值的效果...
复制链接

扫一扫