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. loadrunner 参数化-如何从数据库中取数据-连接数据库进行参数化

    LoadRunner提供两种参数化取值方式,一种是手动编辑,另一种就是通过连接数据库取值.一般在大型业务并发压力测试时,数据量肯定也都是非常大的,所以手动去编辑就不切实际了,这时用连接数据库的功能就方 ...

  2. linux下查找堆栈信息例子

  3. python小技巧---打印出不同颜色的输出

    在调试代码时打印常常一种颜色,找个东西真的是很难,在一次听金角大王的视频中听到了个方法,也是喀什使用了,本来不打算做记录了,可是稍微有几天不用,还得翻之前的代码,找着也是听麻烦的,现在在这里做个记录 ...

  4. 创建X个任意元素数组并且可以遍历的的一个方法

    方法一: Array.apply(null, { length: 20 })分析:apply 第二个参数应该是数组,现在把 { length: 20 } 转化为数组,就是一个长度为X的数组(类数组对象 ...

  5. python函数注释,参数后面加冒号:,函数后面的箭头→是什么？

    https://blog.csdn.net/sunt2018/article/details/83022493

  6. Boxes and Balls UVALive - 7500（练习赛爆零）

    原因: 自身: 1.自己并没有考虑过精度所带来的问题. 2.一定要自己读题,独立思考,末被队友带偏(矛盾出真理). 3.加强自身基础,提高自身实力. 队伍: 1.队友缺乏独立思考,需要加强. 题目描述 ...

  7. mongo学习笔记2--索引及表设计

    -背景: 鉴于我们使用mongo作为数据库,期间少不了需要添加索引和对业务表进行设计.因此以下我对mongo索引及表设计原则做了一些分享.希望对大家有用,如有错误还望指正~ MongDB的索引类型简介 ...

  8. 虚函数 error LNK2001: 无法解析的外部符号 "public: virtual void __cdecl

    在虚函数后面加一对大括号 #ifndef CAFFE_CONV_DW_LAYER_HPP_ #define CAFFE_CONV_DW_LAYER_HPP_ #include <vector&g ...

  9. java protected修饰符说明

    1. 简介 对protected修饰符进行阐述,结合Object类的clone方法进行说明.其中clone方法如下:protected Object Object.clone(): 关于protect ...

  10. Tsinghua 2018 DSA PA3简要题解

    CST2018 3-1-1 Sum (15%) 简单的线段树,单点修改,区间求和. 很简单. CST2018 3-1-2 Max (20%) 高级的线段树. 维护区间最大和,区间和,左边最大和,右边最 ...