在非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. Android Studio使用Mob来获取手机验证码加上倒计时

    再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...

  2. Git版本号控制

        Git是分布式版本号控制系统.与SVN类似的集中化版本号控制系统相比.集中化版本号控制系统尽管可以令多个团队成员一起协作开发,但有时假设中央server宕机的话,谁也无法在宕机期间提交更新和协 ...

  3. 最短路 spfa， dijkstra， Floyd

    spfa #include <stdio.h> #include <queue> using namespace std; #define RANGE 101 #define ...

  4. kafka删除主题

    hdp集群默认不能删除kafka主题,如果要删除,需要在ambari上进行配置,将enable delete设置为true.

  5. linux命令行打开图片

    1.用预装的eog eog a.jpg 2.安装 imagemagick display a.jpg

  6. Snapshot Standby

    INTRODUCTION Snapshot standby database是ORACLE 11g的新特性.允许Physical standby短时间的使用read write模式. Snapshot ...

  7. kill&&pkill&&killall---删除执行中的程序

    命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果无法终止该程序可用“-KILL” 参数,其发送的信号为SIGKILL(9) ,将强制结束进程 使用ps命令 ...

  8. POJ 4047 Garden

    Garden Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 404 ...

  9. SDUT--Pots（二维BFS）

    Pots Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 You are given two pots, having the ...

  10. LINUX下为apache 和 PHP 添加模块

    LINUX下为apache 和 PHP 添加模块https://www.path8.net/tn/archives/4717/opt/lampp/bin/httpd -V/opt/lampp/bin/ ...