css clear的理解

最新推荐文章于 2023-05-10 18:16:26 发布

SakuraLJ

最新推荐文章于 2023-05-10 18:16:26 发布

阅读量1.6k

点赞数 2

分类专栏： css 文章标签： css clear

本文链接：https://blog.csdn.net/SakuraLLj/article/details/48313781

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前一直不明白clear的意义何在，一直以为clear就是去掉元素本身都浮动属性（即使元素的float设置为none），如果这样理解就显得clear非常多余。最近再次接触到clear才弄明白clear的本来意义。
下面直接看实例：
1. 没有清除浮动

<html>
    <head>
        <style type="text/css">
            .div1{
                float: left;
                width: 100px;
                background-color: #0f0;
                word-break: break-all;
            }
            .div2{
                float: left;
                width: 100px;
                background-color: #f00;
                word-break: break-all;
                /*clear: left;*/
            }
            .div3{
                width: 300px;
                background-color: #00f;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
        <div class = "div1">
            aaaaaaaaaaaaaaaaa 
        </div>
        <div class = "div2">
            ddddddddddddddddd
        </div>
        <div class = "div3">
            1234567890qwertyuioplkjhgfdsazxcvbnm
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </div>
    </body>
</html>

运行后的结果是：
这里写图片描述
我们可以看到div2跟在div1的后面
2. 清除浮动

    .div2{
            float: left;
            width: 100px;
            background-color: #f00;
            word-break: break-all;
            clear: left;
        }

运行结果：
这里写图片描述
我们看到div2在div1下面了，但是div2的float并没有被清除（不是float:none，而是float:left），也就是说div2还是向left浮动了，为什么这样说呢，现在我把div2的float设置为none：

.div2{
    float: none;
    width: 100px;
    background-color: #f00;
    word-break: break-all;
    clear: left;
}

运行效果：
这里写图片描述
div2因为没有浮动，所以和div3同处在标准流里面，因此可以证明上一步的div2是向left浮动的。此时我们可以明白clear的作用了，就是不让元素本身跟在之前的浮动元素后面，而是在之前元素的下一行进行left/right浮动。

应用场景举例
要实现如图的布局：

目前很多人的做法是：
在“姓名”和“班级”包裹一个div并是这个div向左浮动，然后再使简介向左浮动，示例代码（普遍做法）：

<html>
    <head>
        <style type="text/css">
            .div1{

                width: 100px;
                background-color: #0f0;
                height: 100px;
            }
            .div2{

                width: 100px;
                background-color: #f00;

                height: 150px;
            }
            .div3{
                float: left;
                width: 300px;
                background-color: #00f;
                height: 300px;
                overflow: hidden;
            }
            .div{
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <div class = "div1">
                姓名
            </div>

            <div class = "div2">
                班级
            </div>
        </div>
        <div class = "div3">
            简介
        </div>
    </body>
</html>

利用clear的做法：

<html>
    <head>
        <style type="text/css">
            .div1{
                float: left;
                width: 100px;
                background-color: #0f0;
                height: 100px;
            }
            .div2{
                float: left;
                width: 100px;
                background-color: #f00;
                clear: left;
                height: 150px;
            }
            .div3{
                width: 300px;
                background-color: #00f;
                height: 300px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class = "div1">
            姓名
        </div>

        <div class = "div2">
            班级
        </div>
        <div class = "div3">
            简介
        </div>

    </body>
</html>

现在班级、姓名、简介平起平坐了，不用在班级和姓名外再裹一层了……

参考：
准确理解CSS clear:left/right的含义及实际用途

SakuraLJ

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css clear的理解

之前一直不明白clear的意义何在，一直以为clear就是去掉元素本身都浮动属性（即float:none）。最近再次接触到clear才弄明白clear的本来意义。下面直接看实例： 1. 没有清除浮动<html> <head> <style type="text/css"> .div1{ float: left;
复制链接

扫一扫