<!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. android开源框架和开源项目（转）

    特效: http://www.androidviews.net/ http://www.theultimateandroidlibrary.com/ 常用效果: 1. https://github.c ...

  2. UTF-8、UTF-16、UTF-32编码的相互转换

    最近在考虑写一个可以跨平台的通用字符串类,首先需要搞定的就是编码转换问题. vs默认保存代码文件,使用的是本地code(中文即GBK,日文即Shift-JIS),也可以使用带BOM的UTF-8.gcc ...

  3. uvalive5810 uva12368 Candles

    题意:每组数据给出n个数,每个数在1-100,问组成这些数的蜡烛的权值的最小值.权值=把选的蜡烛从大到小排列组成的数 组成方式:比如有1 3两个蜡烛 可以组成13(1和3)或4(1+3) 只有一个加号 ...

  4. uva 10003 Cutting Sticks （区间dp）

    本文出自   http://blog.csdn.net/shuangde800 题目链接:  打开 题目大意 一根长为l的木棍,上面有n个"切点",每个点的位置为c[i] 要按照一 ...

  5. 达内TTS6.0课件oop_day03

  6. Cocos2d-x 3.1.1 学习日志6--30分钟了解C++11新特性

    新的keyword auto C++11中引入auto第一种作用是为了自己主动类型推导 auto的自己主动类型推导,用于从初始化表达式中判断出变量的数据类型.通过auto的自己主动类型推导.能够大大简 ...

  7. BCGControlBar使用方法（转）

    一.   关于BCGControlBar. BCGControlBar是一个基于MFC的扩展库,您可以通过完全的用户化操作构成一些类似于Microsoft Office 2000/XP/2003和Mi ...

  8. HTML系列（四）：编辑图像

    一.图像的基本概念 1.矢量图:文件占用空间小,放大后图像不会失真,和分辨率无关.适用于图形设计.文字设计.标志设计.版式设计等. 2.位图:由像素点组成,文件较大,放大和缩小图像会失真. 3.有损压 ...

  9. SQL练习之不反复执行相同的计算

    下面是Demo所需要的代码: CREATE TABLE Fee ( Income ,), overhead ,) ) ,) ,) ,) ,) ,) ,) 现在有一个报表系统,需要根据Fee表获得以下数 ...

  10. vs2012C#编程环境设置智能提示

    vs2012 智能提示和  显示行号的问题 路径为    菜单里 工具-->选项-->文本编辑器-->C#  如图所示 自动列出成员就是 vs里面的智能提示 行号就会显示所写代码的行 ...