<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .test{
                zoom: 1;
                border: 1px solid #f00;
            }
            .test:after{
                display: block;    
                clear: both;
                visibility: hidden;
                height: 0;
                content: '';
            }
        </style>
    </head>
    <body>
        <div>
            清除浮动 方法1： test{clear:both;} test为浮动元素的下一个兄弟元素 方法2： test{display:block;zoom:1;overflow:hidden;} test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3： test{zoom:1;} test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
            
        </div>
        <div style="border: 1px solid #f00;">
            <div style="float: left;">左浮动</div>
            <div style="clear: both;">下一个兄弟元素清除浮动</div>
        </div>
        <div style="border: 1px solid #f00;display: block;zoom: 1;overflow: hidden;margin: 10px 0;">
            <div style="float: left;">左浮动</div>            
        </div>
        <div class="test">
            <div style="float: left;">左浮动</div>            
        </div>
    </body>
</html>

css 3种清除浮动方法的更多相关文章

  1. CSS系列，清除浮动方法总结

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  2. css清除浮动方法大全

    清除浮动这个问题,做前端的应该再熟悉不过了,也是每一个web前台设计师 必须掌握的机能. 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width ...

  3. DIV+CSS清除浮动方法

    一.为什么要清除浮动? 1>父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来) 2>因为部分子元素的而浮动,脱离 ...

  4. CSS清除浮动方法集合

    CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...

  5. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  6. CSS给元素清除浮动影响的方法，--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  8. 「CSS」常见的清除浮动方法

    下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...

  9. CSS知识点：清除浮动

    开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一 ...

随机推荐

  1. Java+Python+Jython环境变量配置

    一.Java 环境变量配置: 新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0变量名:CLASSP ...

  2. SQL Server 判断数据库是否存在，表是否存在

    if DB_ID('testdb') is not null -- 如果这个数据库已经存在了 drop database testdb; create database testdb; if OBJE ...

  3. Python核心编程笔记----注释

    python 中注释有两种 第一种,文档注释 第二种,一般的注释 下面是例子: class MyClass: '这个是文档注释' def __repr__(self): return "re ...

  4. 将Python代码嵌入C++程序进行编写

    将Python代码嵌入C++程序进行编写的实例,python嵌入 把python嵌入的C++里面需要做一些步骤 安装python程序,这样才能使用python的头文件和库 在我们写的源文件中增加“Py ...

  5. Storm csdn

    blog.csdn.net/lonelytrooperblog.csdn.net/leytton http://my.oschina.net/apdplat/blog/308396

  6. COB (Chip On Board) 製程介紹/簡介/注意事項 II

    銀膠 (Silver glue) 如果晶圓有接地或是散熱需求時,一般都會採用[銀膠],如果沒有的話則會採用[厭氧膠].[厭氧膠]顧名思義就是阻隔它與空氣接觸後就會自然固化,不需要高溫烘烤.使用銀膠則需 ...

  7. 运用JavaScript构建你的第一个Metro式应用程序（on Windows 8）（一）

    原文 http://blog.csdn.net/zhangxin09/article/details/6784547 作者:Chris Sells 译: sp42   原文 包括 HTML.CSS 和 ...

  8. spring的作用及优势---第一个spring示例

    Spring 的作用及优势  * Spring 用于整合,好处是解耦. 解耦,可以降低组件不组件乊间的关联,改善程序结构,便于系统的维护和扩展. 我们在使用 Spring 框架时,主要是使用 Spri ...

  9. uva 215 hdu 1455 uvalive5522 poj 1011 sticks

    //这题又折腾了两天 心好累 //poj.hdu数据极弱,找虐请上uvalive 题意:给出n个数,将其分为任意份,每份里的数字和为同一个值.求每份里数字和可能的最小值. 解法:dfs+剪枝 1.按降 ...

  10. uva 825 - Walking on the Safe Side(dp)

    题目链接:825 - Walking on the Safe Side 题目大意:给出n,m,现在给出n行数据, 每行有k(k为不定值)个数字, 第一个数字代表行数, 后面k - 1个数代表当前行的这 ...