1.通过父元素overflow:hidden,缺点：超出部分隐藏，不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;overflow:hidden;}

        .left{float:left;}

        .right{float:right;}

    </style>

</head>

<body>

<div class="box">

   <div class="left">54</div>

   <div class="right">33</div>

</div>

</body>

</html>

效果：

方式2：添加空标签并设置clear:both，缺点是额外添加空标签，不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;}

        .left{float:left;}

        .right{float:right;}

        .slot{clear:both;}

    </style>

</head>

<body>

<div class="box">

   <div class="left">54</div>

   <div class="right">33</div>

   <div class="slot"></div>

</div>

</body>

</html>

方式3：通过伪类添加，既不会隐藏超出部分，又不多空标签，推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;}

        .box:after{content:'';display:block;clear:both;}

        .left{float:left;}

        .right{float:right;}

    </style>

</head>

<body>

<div class="box">

   <div class="left">54</div>

   <div class="right">33</div>

</div>

</body>

</html>

css清除浮动方式总结的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  3. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  4. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  5. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  6. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  7. 前端开发CSS清除浮动的方法有哪些？

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

  8. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  9. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

随机推荐

  1. julia 安装

    https://julialang.org/downloads/ 下载安装程序,拖拽完成安装

  2. UI组件--element-ui--Table组件自定义合计行

    需求: Element-ui的Table组件自带合计行, 但是需求需要在合计行的某些单元格有特别的样式以及事件, 没有研究出怎么在既有合计行上完成此需求, 于是利用其原本的一些属性完成自定义合计行. ...

  3. 2019.4.24（js）

    1. 取得正数和负数的绝对值 Math.abs(7.25) Math.abs(-7.25) 2.利用JS刷新页面方法 https://www.cnblogs.com/Chen-XiaoJun/p/62 ...

  4. 第 10 章 容器监控 - 081 - Weave Scope 多主机监控

    除了监控容器,Weave Scope 还可以监控 Docker Host 点击顶部 HOSTS 菜单项,地图将显示当前 host. 与容器类似,点击该 host 图标将显示详细信息 host 当前的资 ...

  5. win10无法搜索本地文件，修复方法？

    win10无法搜索本地文件,实在太不方便了,网上查了一圈没几个方法有效的,筛选出来2个成功解决的问题,具体是哪个起到作用,不太清楚,都放上来,大家自行选择! 方法1:按“Windows+ X”后选择“ ...

  6. 关于spark写入文件至文件系统并制定文件名之自定义outputFormat

    引言: spark项目中通常我们需要将我们处理之后数据保存到文件中,比如将处理之后的RDD保存到hdfs上指定的目录中,亦或是保存在本地 spark保存文件: 1.rdd.saveAsTextFile ...

  7. leetcode刷题——一些算法技巧总结1.0

    运算符优先级,简单记就是:! > 算术运算符 > 关系运算符 > && > || > 赋值运算符 把数字取反,可以作为一种标记 pythonlast = ...

  8. python--个人信息修改程序

    创建一个新的文本,account.txt,输入以下个人信息内容, lanyinhua,lanyinhua,蓝银花,22,Model,PR,22alex,123,华仔 Li,222,CEO,IT,133 ...

  9. vscode 中 eslint 相关配置

    1.设置vue等文件有eslint提示 "eslint.validate": [ "javascript", "javascriptreact&quo ...

  10. 3DsMax 自动化操作（maxScript）

    这是我编写的一部分maxScript 脚本,专注于3DsMax 快速建模,程序化地为我们完成一些繁琐的工作. 可以极大提高公司开发的效率! 2019年04月09日 :上传 今年新开发的插件,还有很多, ...