css中的clear_html clear用法

css中的clear_html clear用法之前一直不明白clear的意义何在,一直以为clear就是去掉元素本身都浮动属性(即float:none)。最近再次接触到clear才弄明白clear的本来意义。下面直接看实例:1.没有清除浮动.div1{float:left;

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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浮动。

  1. 应用场景举例
    要实现如图的布局:
    这里写图片描述
    目前很多人的做法是:
    在“姓名”和“班级”包裹一个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的含义及实际用途

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194657.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 阿里云证书含金量高吗_阿里云的域名证书在哪里下载

    阿里云证书含金量高吗_阿里云的域名证书在哪里下载本文分享,如何在阿里云申请免费的HTTPS证书

  • pycharm更改环境_pycharm配置环境变量

    pycharm更改环境_pycharm配置环境变量我们在使用pycharm创建项目的时候我们可以直接选择创建项目在什么环境之上。但是大多时候我们都是直接在别人的工作上进行二次开发,所以这时候就涉及直接打开代码,这就需要我们自行调整Python环境0.准备工作1.你需要有Python环境,我这里使用的是anaconda配置的虚拟环境1.代码提示和动态解析的设置这一步决定你写代码的时候是不是会报错,是不是能给出代码提示。首先我们直接File–》Settings直接熟练的打开设置:之后我们直接按照下图,找到调整环境的位置按照你的实际情况,选

  • LaTeX详细教程+技巧总结[通俗易懂]

    LaTeX详细教程+技巧总结[通俗易懂]LaTeX技巧总结,包含LaTeX工具,LaTeX模板,LaTeX技巧,LaTeX基础,文章架构,字体、大小和颜色,链接,列表,图片,表格,数学公式,算法(伪代码),代码块,论文写作,等等。

  • CentOs6.5上安装Docker完整版

    CentOs6.5上安装Docker完整版早上上班发现之前win10更新了一次,台式机上安装的虚拟机打开变得超级慢,更不要说查看docker相关东西,烦人。只能在自己笔记本上安装docker,测试下案例。——————————————————————————————————————————————————步骤:1、在本机安装Docker需要的epel库(yum安装epel库) 命令:yum install -y epel-…

  • python dataframe fillna_python缺失值处理 fillna

    python dataframe fillna_python缺失值处理 fillna约定:importpandasaspdimportnumpyasnpfromnumpyimportnanasNaN填充缺失数据fillna()是最主要的处理方式了。df1=pd.DataFrame([[1,2,3],[NaN,NaN,2],[NaN,NaN,NaN],[8,8,NaN]])df1代码结果:01201.02.03.01NaNNaN2.02NaNNaNNaN38….

  • Winform为窗体增加快捷键

    Winform为窗体增加快捷键

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号