在非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. Linux下安装Go环境

    登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...

  2. [React] Validate Custom React Component Props with PropTypes

    In this lesson we'll learn about how you can use the prop-types module to validate a custom React co ...

  3. HTTP请求和响应1：概述

    HTTP的报文分为请求报文和响应报文,打开一个web页面后,浏览器将发起一个HTTP请求报文.HTTPserver收到请求后将回送一个响应报文. 报文的基本结构 HTTP的请求和响应报文都由三个部分组 ...

  4. opencms9.0安装

    今天安装opencms 9.0遇到了一些问题,因为是初次安装和使用,导致耽误了非常多时间.所以在此记录一下以备以后借鉴. 首先附上安装步骤链接: http://www.51testing.com/ht ...

  5. windows WEB 高可用/可伸缩

    windows NLB+ARR实现Web负载均衡高可用/可伸缩   基于IIS的ARR负载均衡 基于NLB负载均衡 这两篇分别分ARR 和 NLB基本配置,下面我们讲讲,如何组合使用,搭配成高可用/可 ...

  6. Es5正则

    ##JSON(ES5) 前端后台都能识别的数据.(一种数据储存格式) XNL在JSON出来前 JSON不支持  undefinde和函数. 示列:let = '[{"useername&qu ...

  7. 初识Django框架——环境搭建前你需要了解的几点

    Django是一个开放源代码的Web应用框架,由Python写成. 采用了MVC的框架模式,即模型M,视图V和控制器C. 它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是C ...

  8. swift 一疑问：reduce

    var products = [   Product(name: "Kayak", description: "A boat for one person",p ...

  9. [Python] List & Object spread in Python

    def myfunc(x, y, z): print(x, y, z) tuple_vec = (, , ) dict_vec = {, , } >>> myfunc(*tuple_ ...

  10. MySQL具体解释（13）------------事务

    一. 什么是事务 事务就是一段sql 语句的批处理.可是这个批处理是一个atom(原子) .不可切割,要么都运行,要么回滚(rollback)都不运行. 二.为什么出现这样的技术 为什么要使用事务这个 ...