前端的学习之路：初级CSS---clear

最新推荐文章于 2022-12-16 21:15:00 发布

new-SkyWaller

最新推荐文章于 2022-12-16 21:15:00 发布

阅读量111

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113704837

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

本文介绍了CSS中clear属性的使用，旨在解决浮动元素对其他元素布局的影响。通过设置clear属性，可以避免元素因其他浮动元素导致的位置变化。示例展示了如何使用clear:both来消除左右浮动元素对box3的影响，保持其原始位置。

摘要由CSDN通过智能技术生成

clear


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clear</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.21.05.css"> -->
    <style>
        div {
            font-size: 50px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

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

        }

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

            如果我们不希望某个元素因为其他元素浮动的影响而改变位置
                可以通过clear属性来清除浮动元素对当前元素所产生的影响

            clear
                -作用：消除浮动元素对当前元素所产生的影响
                -可选值：
                    left 清除左侧浮动元素对当前元素的影响
                    right 清除右侧浮动元素对当前元素的影响
                    both 清除两侧中最大影响的那侧

                原理：
                    设置清除浮动后，浏览器会自动为元素添加上一个上外边距
                            以使其位置不受其他元素的影响            
             */
            clear: both;
        }
    </style>
</head>

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

</html>