在非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. 使用bitmap处理海量数据

    bitmap是一个十分实用的结构.所谓的Bit-map就是用一个bit位来标记某个元素相应的Value, 而Key即是该元素.因为採用了Bit为单位来存储数据,因此在存储空间方面,能够大大节省.  适 ...

  2. android 动态设置TextView值，例：金额添加

    一说到动态递增设置TextView值,非常多人应该立即就想到起个线程,让后在线程中睡眠指定时间,使用handler发送消息更新TextView值! 这样是实现了动态递增设置TextView值可是效率不 ...

  3. Hbuilder开发app实战-识岁06-face++的js实现【完结】

    前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...

  4. Android中关于Volley的使用（十）对Request和Reponse的认识

    我们知道,在网络Http通信中.一定会有一个Request.相同的,也一定会有一个Response.而我们在Volley中利用RequestQueue来加入请求之前,一定会先创建一个Request对象 ...

  5. ubuntu 分屏工具

    本文提到的分屏工具,均可通过sudo apt-get install的方式进行安装: 基本:terminator 高级:tmux,screen 还可进一步使用:ctrl + superkey + 方向 ...

  6. js实现 导航移入移出效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSU 8月月赛 Decimal 小数化分数

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1303 这个OJ很容易跪所以我贴一下题目 Description 任意一个分数都是有理数,对于任意一 ...

  8. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

  9. Android学习笔记进阶19之给图片加边框

    //设置颜色 public void setColour(int color){ co = color; } //设置边框宽度 public void setBorderWidth(int width ...

  10. WdatePicker日期控件的使用

    将压缩包中的文件连带文件夹添加到项目中去,注意要完整的添加到项目中去,不要更改了其目录结构 然后在aspx页面中直接使用即可: 首先引入: <script src="/Controls ...