CSS之Clear属性

最新推荐文章于 2024-08-28 17:25:52 发布

极客研究者

最新推荐文章于 2024-08-28 17:25:52 发布

阅读量593

点赞数 1

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105572557

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

元素的clear属性:
box1向左浮动,脱离文档流(不再占用位置),box2将自动向上移动,位置发生了改变
如果不想让下边的元素的位置发生改变

为了解决这个问题:可以设置元素的clear属性:
清除浮动元素对当前元素的位置的影响

clear:
作用:清除浮动元素对当前元素的影响
可选值；
left:清除左侧浮动元素对当前元素的影响
right:清除右侧浮动元素对当前元素的影响
both:清除左/右两侧浮动元素对当前元素的影响

原理:设置了clear属性后,浏览器会自动为当前元素(块元素)添加上外边距
以使当前元素不再发生移动

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clear属性</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: cadetblue;
            /* 设置向左浮动*/
            float: left;
            
        }

        .box2{
            width:400px;
            height:400px;
            background-color:crimson;
            float: right;
            
        }

        .box3{
            width:200px;
            height:200px;
            background-color:chartreuse;
            /*设置clear属性:使其位置不受左侧浮动元素的影响 */
            /* clear: left; */
            /*设置clear属性:使其位置不受右侧浮动元素的影响 */
            /* clear: right; */
            /* clear: both; */
        }

    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>