用after伪类实现，兼容多种浏览器：
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;overflow:hidden;}

为了兼容IE6、IE7，加上下面代码：

.clearfix{zoom:1}

一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了。

使用after伪类，配合IE的zoom或者overflow清除浮动的更多相关文章

  1. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  2. CSS的伪类 :before 和 :after

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  3. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  4. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  5. CSS 属性 :before && :after的用法，伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  6. css 伪类::after ::beftor 的使用方式

    注释:对于 IE8 及更早版本中的 :before,必须声明 . ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见 ...

  7. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  8. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  9. :before 和 :after 的内幕 以及伪类 ( 转 )

    原文链接    http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html ------------------------------- ...

随机推荐

  1. JAVA中的类

    节选自:http://www.cnblogs.com/dolphin0520/p/3811445.html 1. 成员内部类是依附外部类而存在的,也就是说,如果要创建成员内部类的对象,前提是必须存在一 ...

  2. 基于Xtrabackup备份集来恢复某个误删除的表（drop）

      Preface       Yesterday,I've demonstratated how to rescue a droped and a truncated table based on ...

  3. Linux & Windows 查看 ip 地址

    Windows 查看本机 IP 打开 cmd,输入 ipconfig,回车,找到IPv4地址 或者通过以下方式查看 点击Win10系统的右下角的宽带连接图标,如下图所示.        点击弹出菜单的 ...

  4. rownum浅谈（一）

    只要做web开发,几乎没有不需要分页查询的,在oracle中,rownum就是用来进行处理分页的. 1.rownum是oracle对结果集返回的一个伪列,也就是说是先查询完结果之后再加上的一个虚列,相 ...

  5. Android记事本07

    昨天: activity横竖屏切换的生命周期 今天: Anr异常的原因和解决方案 遇到的问题: 无.

  6. HDU 1937 F - Finding Seats 枚举

    F - Finding Seats Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  7. PHP文件开头session_start()

    session_start(); 告诉服务器使用session.一般来说,php是不会主动使用session的. 不过可以设置php.ini中的session.auto_start=1来自动对每个请求 ...

  8. 【bzoj3809/bzoj3236】Gty的二逼妹子序列/[Ahoi2013]作业 莫队算法+分块

    原文地址:http://www.cnblogs.com/GXZlegend/p/6805252.html bzoj3809 题目描述 Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了 ...

  9. NGINX: 优化 use 参数

    转自:http://blog.sina.com.cn/s/blog_5eaf88f10100gkrq.html Nginx use参数分析对比 下图对比了poll select epoll和kqueu ...

  10. 详解利用ShoeBox制作位图字体

    http://childhood.logdown.com/posts/190580/-details-using-shoebox-produce-bitmap-fonts?utm_source=tui ...