css中的clear_html clear用法

全栈程序员-用户IM • 2022年9月12日下午1:46 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

之前一直不明白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>