<!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. 多字节字符与界面 manifest

    之前把调试项目的时候软件界面变成了很古板的那种界面,后来查了一会发现因为字符集的改变,个人习惯统一我一般用同一种字符集,虽然Unicode只涉及语言问题,不过总感觉它占内存,用非字符集,搜索发现将代码 ...

  2. MySQLdb callproc 方法

    MySQLdb执行存储过程时就要调用 callproc 方法.它返回的是调用时的参数列表. MySQL 中存储过程的定如下: delimiter // create procedure proc_in ...

  3. Oracle EBS-SQL (SYS-24):职责列表

    select B.application_name, TL.responsibility_name from fnd_responsibility_tl tl, fnd_responsibility ...

  4. Oracle EBS-SQL (SYS-17):查询一张报表在哪个职责下面.sql

    1.查询该报表的 concurrent_program_id SQL如下: SELECT t.application_id, t.concurrent_program_id, t.* FROM FND ...

  5. N沟道和P沟道MOS FET开关电路

    在电路中常见到使用MOS FET场效应管作为开关管使用.下面举例进行说明. 如图1所示,使用了P沟道的内置二极管的电路,此处二极管的主要作用是续流作用,电路是Li电池充放电电路,当外部电源断开时采用L ...

  6. ARM Cortex M3(V7-M架构)硬件启动程序 一

    Cortex-m3启动代码分析笔记 启动代码文件名是STM32F10X.S,它的作用先总结下,然后再分析. 启动代码作用一般是: 1)堆和栈的初始化: 2)中断向量表定义: 3)地址重映射及中断向量表 ...

  7. Debug程序无法运行解决

    说明:文章内容部分参考网络上的解决思路. 在没有安装Microsoft Visual Studio的系统上,Debug版本无法正常运行.这是由于缺少vs运行时库引起的. 以vs2005为例.开发机用v ...

  8. mysql基础示例

    创建数据库.创建表等: //php中按天创建表 $sql = "create database if not exists ".$db_name; $date_time_array ...

  9. sql server dateadd()

    定义和用法 DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法 DATEADD(datepart,number,date) date 参数是合法的日期表达式.number 是您希望添加的 ...

  10. 使用MyBatis搭建一个访问mysql数据库的简单示例

    MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用 ...