清除浮动的三种方法

1 加空div层(.clear)
2 overflow属性设置(.clearo)
3 :after伪元素(.clearfix)
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .div1{width:100%;height:auto;border:2px solid red;}

        .div2{float:left;width:20%;height:80px;background:blue;}

        .div3{float:right;width:30%;height:50px;background-color: lightblue;}

        .div4{width:50%;height:20px;background:green;}

        .clear{clear:both;}

        .clearo{overflow: hidden;zoom:1;}

        .clearfix{zoom:1;}

        .clearfix:after{

            content:"020";/*.点 或 空*/

            display: block;

            clear:both;

            height:0;

            visibility: hidden;

        }

    </style>

</head>

<body>

    <div class="div1 clearfix">

        <div class="div2">left</div>

        <div class="div3">right</div>

        <div class="div4 clear"></div>

    </div>

</body>

</html>

清除浮动.md的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  3. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...

  4. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  5. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

  8. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  9. CSS清除浮动技巧

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

随机推荐

  1. PopupWindow的一些属性

     void setOutsideTouchable(boolean touchable)            Controls whether the pop-up will be informed ...

  2. 第一个C#控制台程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. RTP 和 RTSP的区别

    RTP(Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输协议.RTP被定义为在一对一或一对多的传输情况下工作.其目的是提供时间信息和实现流同 ...

  4. zoj 1119 / poj 1523 SPF (典型例题 求割点 Tarjan 算法)

    poj : http://poj.org/problem?id=1523 如果无向图中一个点 u 为割点 则u 或者是具有两个及以上子女的深度优先生成树的根,或者虽然不是一个根,但是它有一个子女 w, ...

  5. 深入理解Android（1）——理解Android中的JNI（上）

    我参加了CSDN博客之星评选,如果在过去的一段时间里阳光小强的博客对你有所帮助,在这里希望能投上您宝贵的一票,每天都可以投一次:http://vote.blog.csdn.net/blogstar20 ...

  6. day 5 集合

    # -*- coding: utf_8 _*_# Author:Vi#集合是无序的 list_1 = [1,2,3,2,3,5,7]list_1 = set(list_1)#将列表转变成集合list_ ...

  7. 小米开源文件管理器MiCodeFileExplorer-源码研究(1)-2个模型Model

    上篇说到,把小米的Java代码整理成了5个包,其中1个是net.micode.fileexplorer.model.这个包就2个模型类,最基本了,FileInfo和FavoriteItem. pack ...

  8. sql%rowcount 返回影响行数

    oracle中.返回影响行数是:If sql%rowcount 举例: update ut_calenderStatus t set t.calenderstatus=pi_flg, t.m=pi_M ...

  9. POJ3622 Gourmet Grazers（FHQ Treap）

    Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2363   Accepted: 881 Description Like s ...

  10. CISP/CISA 每日一题 14

    CISA 每日一题(答) 自动无人值守运行(LIGHTS-OUT)优势:1.信息系统运行成本的遏制/减少:2.持续运行(24/7):3.减少系统错误和中断次数. I/O 控制人员负责保证:1.批处理信 ...