在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

例子:

没用clear的情况下

 <style>

        .c1{

            width: 500px;

            background-color:#000;

            border:1px solid #F00;

            padding:10px;

        }

        .c1_left,.c1_right{

            width:200px;

            height:150px;

            border:1px solid #FFF;

            background-color: #999;

        }

        .c1_left{

            float: left;

        }

        .c1_right{

            float:right;

        }

    </style>

<body>

    <div class="c1">

        <div class="c1_left">float left</div>

        <div class="c1_right">float right</div>

    </div>

</body>

　　

这样就达不到我们预期的效果

加clear:both清除浮动

    <style>

        .c1{

            width: 500px;

            background-color:#000;

            border:1px solid #F00;

            padding:10px;

        }

        .c1_left,.c1_right{

            width:200px;

            height:150px;

            border:1px solid #FFF;

            background-color: #999;

        }

        .c1_left{

            float: left;

        }

        .c1_right{

            float:right;

        }

        .clear{

            clear:both;

        }

    </style>

<body>

    <div class="c1">

        <div class="c1_left">float left</div>

        <div class="c1_right">float right</div>

        <div class="clear"></div>

    </div>

</body>

....

clear属性来取消浮动的更多相关文章

  1. CSS 清除浮动 clear 属性

    CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...

  2. clear属性

    clear:规定元素的哪一侧不允许其他浮动元素. clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上 ...

  3. css之clear属性

    clear属性用来设置元素左右两边是否可以存在浮动元素. 它的值包括:left,right,both,none.其中none代表左右两边可以出现浮动元素.

  4. CSS的clear属性

    以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CS ...

  5. clear 属性

    clear属性:规定元素的哪一侧不允许有其他的浮动元素 Example: <html> <head> <style type="text/css"&g ...

  6. CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...

  7. CSS基础（float属性与清除浮动）

    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...

  8. HMLT clear 属性

    原文 : http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/ clear 的四个值 ...

  9. 详解CSS中clear属性both、left、right值的含义

    前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear: ...

随机推荐

  1. ajax提交转码解码

    js 文字传输加密 encodeURI(encodeURI(distName)) java 解密 URLDecoder.decode(request.getParameter("distNa ...

  2. 自己定义控件-DownSlidingDrawer

    一.描写叙述 能够下拉的 SlidingDrawer 二.效果图 图片是网上找到,可是效果是一样的 三.源代码 https://github.com/mentor811/Demo_MySlidingD ...

  3. Java解析注解

    package com.itbuluoge.anno; import java.lang.reflect.Method; import java.util.ArrayList; import java ...

  4. ip6tables： ipv6-icmp vs icmp

    ip6tables: ipv6-icmp vs icmp资料来源 https://www.jethrocarr.com/2013/02/09/ip6tables-ipv6-icmp-vs-icmp/I ...

  5. Android学习笔记之图像颜色处理（ColorMatrix）

    对图像进行颜色方面的处理,通过使用颜色矩阵(ColorMatrix)来实现.从而可以达到很多特效如黑白老照片.泛黄旧照片等等. 1.颜色矩阵(ColorMatrix) 这里有详细的介绍:http:// ...

  6. js---对象 和 函数this

    一:对象创建的方法 //普通 字面量形式 var obj = { name:'名字', fn:function(){ console.log(this.name); } } //new 实例 var ...

  7. IIS文件上传大小修改配置说明

    原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大小时30M). 解决:IIS7更改asp.net文件上传大小限制 步骤如下: 1.    修改I ...

  8. Oracle 11g win7 64位【桌面类 && 服务器类】安装过程

    Oracle 11g  win7  64位[桌面类 && 服务器类]安装过程  一.首先,根据自己的操作系统位数(32位或64位),到官网下载相应的安装程序,如下图所示.       ...

  9. DockerUI（图形化管理）

    由于运行Docker容器和管理它们可能会花费一点点努力和时间,因为基于web的应用程序-DockerUI应运而生,它可以让管理和运行容器变得很简单.DockerUI是一个开源的基于Docker API ...

  10. Nim游戏算法实现