ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

06.clear

2022-06-19 19:04:28  阅读:128  来源: 互联网

标签:right 06 clear float box2 box1 left


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size:50px;
        }

        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            /* float:left; */
            /* 3这个文字不会动,因为文字会自动环绕在浮动元素周围 */
        }

        .box2{
            width:400px;
            height:400px;
            background-color: #ff0;
            /* float:right; */
        }

        .box3{
            width:200px;
            height:200px;
            background-color: orange;
            /* 
                由于box1的浮动,导致box3位置上移
                也就是box3受到了box1浮动的影响,位置发生了改变

                如果我们不希望某个元素因为其他元素浮动的影响而改变位置,
                可以通过clear属性来清除浮动元素对当前元素所产生的影响
             
                clear
                    - 作用:清除浮动元素对当前元素所产生的影响
                    - 可选值:
                        left 清除左侧浮动元素对当前元素的影响
                        right 清除右侧浮动元素对当前元素的影响
                        both 清除两侧中最大影响的那侧(较大侧) 

                    - 原理:
                        设置清除浮动以后,浏览器会自动为元素添加一个上外边距,
                        以使其位置不受其他元素的影响
                        */
                /* clear:left; */
                /* 
                    box1依然浮动,只是box3不再受box1的影响
                    box3的margin-top被设置为200px
                */
                /* clear:right; */
                /* margin-top为400px */
                /* clear:both; */
                /* 若box2的height为150px,则会清除box1的影响,即margin-top为200px */
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

.box1{
    float:left;
}

.box2{
    float:right;
}
/* 如果觉得不好理解,可以想想如果box2 float:left */

.box1{
    float:left;
}

.box2{
    float:right;
}

.box1{
    float:left;
}

.box2{
    float:right;
}

.box3{
    clear:left;
}

 

.box1{
    float:left;
}

.box2{
    float:right;
}

.box3{
    clear:right;
}

.box1{
    float:left;
}

.box2{
    float:right;
}

.box3{
    clear:both;
}

和上张图一致

.box1{
    float:left;
}

.box2{
    height:150px;
    float:right;
}

.box3{
    clear:both;
}

标签:right,06,clear,float,box2,box1,left
来源: https://www.cnblogs.com/sherryyuan/p/16391093.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有