<!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. Entity Framework 数据部分更新之Attach &&Detach

    我们经常会遇到这样的问题:Update一个entity的部分数据时,通常需要new一个新的对象,然后事这新的对象Attach到Context中,代码如下所示: /// <summary> ...

  2. Python中进行Base64编码和解码

    Base64编码 广泛应用于MIME协议,作为电子邮件的传输编码,生成的编码可逆,后一两位可能有“=”,生成的编码都是ascii字符.优点:速度快,ascii字符,肉眼不可理解缺点:编码比较长,非常容 ...

  3. SQL Server 日志截断

    截断事务日志是逻辑操作,只是把日志的一部分标记为‘不再需要’所以可以重用这个空间,截断不是物理操作,不会减少磁盘上文件的大小, 要减小物理大小必定要进行收缩. ----------- 有时就算是备份都 ...

  4. WISPr1.0

    王桢珍 王兵 侯志强 苑红 中国移动研究院 网络技术研究所, 北京100053 摘要   本文详细介绍了WLAN国际漫游的WISPr1.0技术规范并探讨其具体实现,包括基于WISPr1.0的WLAN国 ...

  5. iptsbles及磁盘扩容

    如果你的IPTABLES基础知识还不了解,建议先去看看. 们来配置一个filter表的防火墙 1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Cha ...

  6. winds引导配置数据文件包含的os项目无效

    我装了winds7与linux双系统,用easyBcd程序时,删除了一个winds7,之后winds7就进不去了, 进入winds7时显示winds未能启动,原因可能是最近更改了硬件或软件.解决此问题 ...

  7. ZOJ1100 状压DP +深搜

    记得做过类似于这类题目是能够用组合数学方法来解决的,可惜淡忘了,也找不到了,看了网上的也有人提到过能够用组合公式解决,但是没人做,都是用了状压DP的方法,这个状压非常难讲清楚吧,推荐两篇 第一遍大体看 ...

  8. Swift语言iOS8的蓝牙Bluetooth解析

    开发中央步骤: 1.添加CoreBluetooth.framework框架到你的工程 2.继承两个协议:CBCentralManagerDelegate和CBPeripheralDelegate 个人 ...

  9. windows下设置/删除Tomcat的开机自启动

    绿色版tomcat在配置好Java环境以后直接运行bin下面的startup.bat就能够正常启动,但是在客户这里很多时候都 需要tomcat开机自动启动.下面简单介绍一如何在windows下面开机自 ...

  10. Java随机数生成原理--转稿

    1.Math库里的static(静态)方法random() 该方法的作用是产生0到1之间(包括0,但不包括1)的一个double值. double rand = Math.random(); 2.通过 ...