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. javaScript--animate函数

    一.思路 1.获取目标值 2.再获取初始值 3.得到总距离 4.定义定时器的执行间隔 5.获取时间 6.得到总次数 7.总距离/总次数 = 步长 8.使用setInterval不停地改变dom元素的每 ...

  2. git pull和本地文件冲突

    在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息: error: Your local changes to 'c/environ.c' would be overwritten b ...

  3. Matlab的BP神经网络工具箱及其在函数逼近中的应用

    1.神经网络工具箱概述 Matlab神经网络工具箱几乎包含了现有神经网络的最新成果,神经网络工具箱模型包括感知器.线性网络.BP网络.径向基函数网络.竞争型神经网络.自组织网络和学习向量量化网络.反馈 ...

  4. vue-quill-editor富文本编辑器，上传图片自定义为借口上传

    vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194

  5. Spark读写HBase

    Spark读写HBase示例 1.HBase shell查看表结构 hbase(main)::> desc 'SDAS_Person' Table SDAS_Person is ENABLED ...

  6. 322. Coin Change零钱兑换

    网址:https://leetcode.com/problems/coin-change/ 典型的动态规划问题,类比背包问题,这就是完全背包问题 问题的阶段:对数值 i 凑硬币 问题的状态:对数值 i ...

  7. SQL Server 2005 企业版没有 Microsoft SQL Server Management

    我从网上下载的:SQL Server 2005 集成sp2的 企业版安装后没发现 Management Studio管理工具,起初以为是自己安装时没装上,昨天试了全部安装后还是没找到,很是郁闷,在网上 ...

  8. Robot Framework--ride使用说明2

    RIDE创建项目 1.创建项目 1.1File->New Project 注:选择directory原因是,在directory的项目下可以创建测试套件,如果是tpye为file,则只能创建测试 ...

  9. hadoop HA学习

    一 HDFS HA架构图 二 HDFS HA组件 Active NameNode和Standby NameNode 在NameNode的HA方案中有两个不同状态的NameNode,分别为活跃态(Act ...

  10. JeasyUI,导出Excel

    这个是客户端表格导出伪Excel文档. 不知道为啥,超过200条,不能导出,显示网络错误 $.extend($.fn.datagrid.methods, { //超过200条,不能导出,显示网络错误? ...