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

    css中clear属性是什么

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

    说明

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

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

    可选值

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

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

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

    实例

    <!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学习网