首页 > 其他分享 >浮动的清除方法

浮动的清除方法

时间:2022-10-09 23:34:09浏览次数:47  
标签:浮动 clearfix 清除 100px height width background 方法 color

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<html>
<style>
    .box {
        width: 200px;
        background: #bfa;
        border: 2px dashed red;
    }

    .box2 {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: orange;
        float: right;
    }

    .box3 {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background-color: rgb(206, 188, 154);
    }
  
    clearfix::after,
    clearfix::before {
        content: '';
        display: table;
        clear: both;
    }
  
    .clearfix::before,
    .clertfix::after {
        content: '';
        display: table;
        clear: both;
    }
</style>

<body>
    <div class="box clearfix">
        <div class="box2"></div>
        <div class="box3"></div>

    </div>
</body>
</html>

 

标签:浮动,clearfix,清除,100px,height,width,background,方法,color
From: https://www.cnblogs.com/overspread/p/16774098.html

相关文章

  • Linux 上下载安装 RabbitMQ 的方法步骤
    RabbitMQ是一套开源(MPL)的消息队列服务软件,是由LShift提供的一个AdvancedMessageQueuingProtocol(AMQP)的开源实现,由以高性能、健壮以及可伸缩性出名的Erlang写成......
  • 设计模式-行为型模式之模板方法
    定义抽象基类,规范接口内部方法执行顺序在进阶篇中,没专门提过抽象基类,在这里顺便就提一下抽象基类的核心特征:不能被直接实例化相反,抽象基类和元类一样,一般都被当......
  • 流程结构及基本数据类型常见内置方法
    本周内容总结概要垃圾回收机制if分支结构while循环for循环整型内置方法浮点型内置方法字符串常用操作列表常用操作字典常用操作集合常用操作元组常用操作字......
  • Java中StringBuffer的获取当前容量的方法capacity的用法
    我们都知道,java中字符串都是用String,内容和长度都是不可变的。如果想使用可变长度的,可以使用类StringBuffer该类的方法是安全的,可以保证线程安全   使用的过程中学......
  • Date前端日期变为年龄处理方法
    现在页面展示效果为: 1,首先编写一个过滤器用来处理想要处理的数据 2,将要处理的数据绑定到过滤器上3,过滤器中:输入该代码即可完成效果(重点)filters:{showAge(value){......
  • 一种基于分层聚合的3D实例分割方法(ICCV 2021)
    HierarchicalAggregationfor3DInstanceSegmentation(ICCV2021)代码地址:​​https://github.com/hustvl/HAIS​​随着商品3D传感器(Kinect、RealSense、Velodyne激光扫......
  • 文件的操作(读写、方法、光标、内容修改)
    文件(读写、方法、光标、内容修改)文件的基本操作​ 文件的概念 应用程序运行过程中产生的数据最先都存放在内存中,要是想永久保存下来,必须保存于硬盘中,应用程序要是想操作......
  • 文件操作、文件读写、及文件的诸多方法
    文件操作、文件读写、及文件的诸多方法一、文件操作1.文件的概念文件:就是操作系统暴露给用户操作硬盘的快捷方式打开文件,双击时就是从硬盘将数据加载到内存......
  • 面试官:工厂方法模式是什么?
    真正的大师永远怀着一颗学徒的心吃不了学习的苦就要吃生活的苦文章持续更新,可以微信搜索【小奇JAVA面试】第一时间阅读,回复【资料】更有我为大家准备的福利哟!回复【项目......
  • 正确测试bond冗余性的方法
    存储、服务器业务网络基本都会配置bond来测试冗余性能。而客户要down端口通常是为了模拟聚合链路故障。ifdownifup等命令无法真正模拟网口链路断开,根据红帽官网的文档建......