使用方法：

    .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. postman—使用newman来执行postman脚本

    我们知道postman是基于javascript语言编写的,而导出的json格式的postman脚本也无法直接在服务器运行,它需要在newman中执行(可以把newman看做postman脚本的运行环 ...

  2. Windows 网络监测ping IP输出时间

    本文出自:https://www.cnblogs.com/2186009311CFF/p/9489374.html 持续监测网络,打印时间的方法,不足没有精确到毫秒 vbs文件内容如下 Dim arg ...

  3. List集合中对象的排序

    使用到的是: Collections.sort(); 用法是: List<Book> list_book = new ArrayList<Book>(); Book book= ...

  4. 容器内安装nvidia,cuda,cudnn

    /var/lib/docker/overlay2 占用很大,清理Docker占用的磁盘空间,迁移 /var/lib/docker 目录 du -hs /var/lib/docker/ 命令查看磁盘使用 ...

  5. 腾讯这套SpringMVC面试题你懂多少（面试题和答案）

    1.什么是 SpringMvc? 答:SpringMvc 是 spring 的一个模块,基于 MVC 的一个框架,无需中间整合层来整 2.Spring MVC 的优点: 答:1)它是基于组件技术的.全 ...

  6. leetcode-mid-design-297. Serialize and Deserialize Binary Tree¶-NO -？？

    mycode 将list转换成树的时候没有思路 参考: deque 是双边队列(double-ended queue),具有队列和栈的性质,在 list 的基础上增加了移动.旋转和增删等 class ...

  7. md5值校验

    使用哈希的md5给文件加指纹,如果文件被更改,指纹信息就会不匹配,从而确定文件的原值是否被改动. [root@b test]# md5sum a.txt > zhiwen.txt[root@b ...

  8. leetcode 590.N-ary Tree Postorder Traversal N叉树的后序遍历

    递归方法 C++代码: /* // Definition for a Node. class Node { public: int val; vector<Node*> children; ...

  9. OpenStack Placement Project

    目录 文章目录 目录 背景 Placement 简介 基本概念 数据模型解析 Command Line Placement Web Application 的实现与分析 Placement 在启动虚拟 ...

  10. HTTP学习记录：四、头信息（请求和响应）

    学习资源主要为:@小坦克HTTP相关博客 一.请求头信息(Request Header) 请求头信息包含比较多,如下: 1.Cache头域 if-modified-Since 作用:把浏览器端缓存页面 ...