用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. DDT驱动

    下载ddt并安装 Pip install ddt 或者官网下载安装 http://ddt.readthedocs.io/en/latest/ https://github.com/txels/ddt ...

  2. HTML5 FileReader接口学习笔记

    1.FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中F ...

  3. 不吹不擂，你想要的Python面试都在这里了【315+道题】+精心整理的解答

    Part01-Py基础篇(80) Part02-网络编程和并发(34) Part03-数据库和缓存(46) Part04-前端框架和其他(155) Part01-Py基础篇(80) 1.为什么学习Py ...

  4. Python全栈工程师（每周总结：1）

    ParisGabriel   python今年9月份将被国家纳入计算机二级资格证 先学就是鼻祖 几年后你就是大牛      Python人工智能从入门到精通         week summer: ...

  5. Leetcode 659.分割数组为连续子序列

    分割数组为连续子序列 输入一个按升序排序的整数数组(可能包含重复数字),你需要将它们分割成几个子序列,其中每个子序列至少包含三个连续整数.返回你是否能做出这样的分割? 示例 1: 输入: [1,2,3 ...

  6. Spring Cloud Config 搭建Config 服务

    配置中心: open API 配置生效监控 一致性的K-V存储 统一配置的实时推送 配置全局恢复.备份.历史版本 高可用集群 通过config 获取配置,流程: 下面介绍,基于spring cloud ...

  7. Android记事本开发03

    昨天: 生成签名文件及导出apk 遇到的问题: 无. 今天: activity和intent基础

  8. P3200 [HNOI2009]有趣的数列

    题目描述 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<...<a2n ...

  9. LeetCode -- Product of Array Except Self My Submissions Question

    Question: Given an array of n integers where n > 1, nums, return an array output such that output ...

  10. js常用数组去重

    // ES6 function unique (arr){ const seen = new Map() return arr.filter((a) => !seen.has(a) && ...