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. grep 从文件内容中查找

    grep -rin [查找目标] [查找范围] 例子:在当前目录下的文件内查找test字符串 grep -rin test ./

  2. webpack学习笔记 (二) html-webpack-plugin使用

    这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...

  3. [python]html格式转md格式

    html格式转md格式 # 模块html2text pip install html2text/pip3 install html2text 测试: import html2text as ht te ...

  4. jenkins构建成功，但war包没有发布到tomcat下

    如题,jenkins构建成功,在jenkins的workspace中有生成的war包,但没有发布到tomcat的webapps目录. 构建日志 找了很多原因发现应该还是项目相对路径不对导致的,我的wa ...

  5. ssh跳过knownhost文件

    在平时工作中,有时候需要SSH登陆到别的Linux主机上去,但有时候SSH登陆会被禁止,并弹出如下类似提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  6. 【Java】【12】精确的加减乘除运算

    前言:用了BigDecimal对象 正文: 1,加法 /** * @param v1 被加数 * @param v2 加数 * @param scale 保留几位小数*/ public static ...

  7. 2n字符

    有2n字符挨个排成一排,前n个是'1',后n个是'0'.如 11110000(此时2n=8),现在交换字符的位置,使之按照 10101010 的模式排列.而且要使字符移动的次数最少,编程计算最少的移动 ...

  8. Centos7中网络及设备相关配置

    centos7中,不再赞成使用ifconfig工具,取而代之的是nmcli工具,服务管理也是以systemctl工具取代了service,这些之前版本的工具虽然在centos7中还可以继续使用,只是出 ...

  9. Eclipse无法正常启动，弹出对话框内容为 A Java Runtime...

    1.Eclipse无法正常启动,弹出对话框内容为 A Java Runtime...如下图: 原因分析:由于软件版本的更新或者安装其他开发软件无意之间修改了配置文件中的路径,众所周知,Java虚拟机( ...

  10. lumion材质系统室内渲染6.3

    材质系统是对于导入的模型,而不对自带的模型起作用.自带的模型有的能改变属性. 点击“材质”点击墙,出来材质库.为墙体赋予一种材质, 完成后点击保存,就可以保存了.然后给窗户添加玻璃材质. 可以看到墙, ...