使用方法：

    .clearfix:before,.clearfix:after {

      content:".";

      display:table;

    }

    .clearfix:after {

     clear:both;

    }

    .clearfix {

      *zoom:1;

    }

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

使用before和after双伪元素清除浮动的更多相关文章

  1. 什么是BFC？ CSS 如何使用伪元素清除浮动？

    .BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting c ...

  2. 使用after伪类清除浮动

    使用after伪类清除浮动 .department li:after{ content:"."; height:0; visibility:hidden; display:bloc ...

  3. 使用 after 伪类清除浮动

    以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加 ...

  4. CSS给元素清除浮动影响的方法，--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. css 添加伪元素 消除浮动 对父元素高度产生的影响

  6. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  7. css学习_css清除浮动

    若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. ( ...

  8. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  9. CSS基础必备盒模型及清除浮动

    盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...

随机推荐

  1. linux-文件系统-5

    cat /proc/partions cat /proc/mounts mount [options] -o [option] -t 文件类型 设备 挂载目录 设备: (1)设备文件:例如/dev/s ...

  2. druid配置以及监控

    1.druid监控的功能: . 数据源 . SQL监控 对执行的MySQL语句进行记录,并记录执行时间.事务次数等 . SQL防火墙 对SQL进行预编译,并统计该条SQL的数据指标 . Web应用 对 ...

  3. .NET面试题系列（十九）Socket网络异常类型

    序言 资料 异常测试之Socket网络异常

  4. package.json文件

    http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc7(copy) 通常我们使用npm init命令来创建一个npm程序时,会自动生 ...

  5. 打开ubuntu终端，没有用户名显示，只剩下光标在闪

    总结起来就是bash损坏了.bash是用户与操作系统内核交互的工具.bash损坏,则用户无法操作计算机. 推荐两个帖子: https://blog.csdn.net/u011128515/articl ...

  6. Selenium 上手：Selenium扫盲区

    Selenium 自述Selenium 是由Jason Huggins软件工程师编写的一个开源的浏览器自动化测试框架.主要用于测试自动化Web UI应用程序. Selenium 工作原理通过编程语言( ...

  7. sklearn 的 PolynomialFeatures 的用法

    官方文档:http://scikit-learn.org/stable/modules/generated/sklearn.preprocessing.PolynomialFeatures.html ...

  8. [LeetCode]-DataBase-Combine Two Tables

    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...

  9. Array Stack Implement using C

  10. SpringMvc中@ModelAttribute的运用

    /** * 1. 有 @ModelAttribute 标记的方法, 会在每个目标方法执行之前被 SpringMVC 调用! * 2. @ModelAttribute 注解也可以来修饰目标方法 POJO ...