• 技术文章 >Web开发 >css教程

    css中clear属性是什么

    小妮浅浅小妮浅浅2021-08-23 20:31:33原创8893

    说明

    1、用于规定元素哪一侧不允许浮动元素,默认值为none,表示不清除,左右两侧允许浮动元素。

    2、确保当前元素的左右两侧没有浮动元素。clear只对元素本身的布局起作用。

    可选值

    left清除左侧浮动元素对当前元素的影响

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

    both清除左/右两侧浮动元素对当前元素的影响

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    <!DOCTYPE html>

    <html>

    <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>1</div>

        <div>2</div>

        <div>3</div>

    </body>

    </html>

    以上就是css中clear属性的介绍,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css clear
    上一篇:css浮动元素的重叠问题 下一篇:css清除浮动的原因

    相关文章推荐

    • css中流的概念介绍• css文档流的两种特性• css使用transform垂直对齐• css中position常见的四个属性值• css中sticky属性是什么• css中sticky属性有什么特点• css浮动有哪些特性• css浮动元素的规则介绍• css浮动元素的重叠问题

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网