<!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. Linux文件系统与结构

    一.Linux文件系统结构 /bin 二进制的缩写,用来放置可执行的二进制程序,基本命令 /boot 用来存放启动文件,kernel 和boot配置文件 /dev 用来放置设备文件 /dev/cons ...

  2. 分析java中clone()方法 (转载+修改)

    Java中的clone() 方法 java所有的类都是从java.lang.Object类继承而来的,而Object类提供下面的方法对对象进行复制. protected native Object c ...

  3. 07.19 Linux命令 cd

    情景:在用compass编写sass,cd进入目录后,想退出, 解决: cd.. 回到上一层目录 cd\ 回到根目录 cd 进入具体目录

  4. 值得赞扬的尝试与进步——CSDN开源夏令营第一印象

    注:写这篇文章时我并未參加CSDN开源夏令营,也不确定是否会參加以及是否能參加上. 欣闻CSDN举办了"CSDN开源夏令营"活动.第一感觉是CSDN作为活动的组织者是很值得称赞的. ...

  5. SSH整合方案2

    [案例3]SSH整合_方案2 **  案例描述  两个知识点的演示  其一,SSH整合的第二个方案  其二,Spring+JDBC+Struts2  参考代码  31) 使用工程spring4  32 ...

  6. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  7. 异常java.lang.IllegalStateException的解决

    在初始化viewPagerAdapter时,显示异常.从网上找了找有两类这样的问题,一种是说给一个视图设置了两个父类,如: TextView tv = new TextView();layout.ad ...

  8. Android入门——UI(7)——Fragment

    先上fragment静态加载的代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  9. ASP.NET MVC开发必看系列

    一.关于HTTP协议的那些事 这可以说我们开发WEB程序的空气,推荐不断温故知新! HTTP协议 (一) HTTP协议详解 HTTP协议 (二) 基本认证 HTTP协议 (三) 压缩 HTTP协议 ( ...

  10. [Java]HashMap的两种排序方式

    先将 Map 中的 key 和 value 全部取出来封装成 JavaBea 数组,再将这个数组排序,排序完成后,重新写回 Map 中,写回时采用 LinkedHashMap 可以保证迭代的顺序. 下 ...