使用方法：

    .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. Codeforces Gym 101505C : Cable Connection （计算几何）

    题目链接 题意:给出第一象限的N个点,存在一直线x/a+y/b=1(a>0,y>0)使得所有点都在这条直线下面,求 min{sqrt(a^2+b^2)} 显然,这样的直线必然经过这N个点中 ...

  2. 【leetcode】1207. Unique Number of Occurrences

    题目如下: Given an array of integers arr, write a function that returns true if and only if the number o ...

  3. python中json对象转换出错解决方法

    今天在使用python中的json转换碰到一个问题: 接收一个post的json字符串: s={"username":"admin","passwor ...

  4. 一个用于格式化和处理数字的javascript库----Numeral.js

    npm地址:https://www.npmjs.com/package/numeral 1.转化成百分比: numeral(num).format('0.00%')

  5. Email 发送

    namespace 99999 { /// <summary> /// Common interfaces to connect mail server to process e-mail ...

  6. 模板引擎ejs

    1.网站 https://ejs.co/ https://ejs.bootcss.com/ 2.app.js var http=require("http"); var ejs = ...

  7. PHP 字符串相关常识

    0x00 前言 第一次遇见字符串这个概念是在学 C 语言的时候,那时候觉得字符串也没有什么难的,不就是一个以 \0 结尾的 char 数组而已咯.后来在学习 PHP 的过程中也同样保持这个观念,不过在 ...

  8. 【BZOJ1098】办公楼biu（补图，bfs，链表）

    题意:有n个点m条边,要求将点尽可能多的分成若干个部分,使得若两个点不在同一个部分则他们之间必定有边 n<=1e5,m<=2e6 思路:From https://blog.csdn.net ...

  9. 探究重构代码（Code refactoring）

    Code refactoring 是什么 在不改变软件的外部行为的条件下,通过修改代码改变软件内部结构,将效率低下和过于复杂的代码转换为更高效.更简单和更简单的代码. 怎样执行Code refacto ...

  10. phpstudy composer 安装

    今天突然发现phpstudy 可以安装 composer 一打开php中openssl拓展 坑一  我的phpstudy 是2018最新版本,但是你下载laravel什么之类库会报错,是由于compo ...