欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

clear属性的作用

程序员文章站 2024-01-29 22:34:28
...

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>

结果：

clear属性的作用

相关标签： clear的作用 clear与float的区别

上一篇： php开发工具有哪五款_PHP

下一篇： 同一局域网内，智能设备如何访问到PC端的TP的接口

推荐阅读