使用方法：

    .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. Idea+Spring boot 开启热部署

    热部署是spring boot的一大亮点功能,开发者不必因为改动一点代码就去频繁的关开服务. 1) 在pom文件中加载热部署依赖和插件 2)CTRL + SHIFT + A --> 查找make ...

  2. tf.concat( )和tf.stack( )

    相同点:都是组合重构数据. 不同点:concat()不改变维数,而stack改变了维数(待定!!!) tf.concat是连接两个矩阵的操作,请注意API版本更改问题,相应参数也发生改变,具体查看AP ...

  3. 【leetcode】LCP 1. Guess Numbers

    题目如下: 小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的gues ...

  4. 曙光浪潮IBM驱动

    https://pan.baidu.com/s/1lDrotg5jpdN_z0yOYyAo4w

  5. HDU 6578 Blank

    hdu题面 Time limit 1000 ms Memory limit 262144 kB OS Windows Source 2019 Multi-University Training Con ...

  6. 序列式容器————array

    目录 介绍 1 构造函数 2 fill() 3 元素的获取 4 size() 5 empty() 6 front() 7 back() 8 get<n> 9 迭代器(待补充) 10 元素的 ...

  7. Web Api试图加载格式不正确的程序，解决方法

    Web Api试图加载格式不正确的程序,错误如下: 问题原因: 出现上述问题的原因是,所加载的程序集中有32位的,也有64位的,IIS 7 程序池 在Windows下.Net FrameWork是64 ...

  8. [CSP-S模拟测试]:新的世界（BFS）

    题目背景 小学五六年级的乔猫是一个喜欢不务正业写游戏的孩纸$......$他曾经模仿著名的沙盒游戏<$Minecraft$>做过一个自己的游戏$"NEWorld"$.这 ...

  9. 快速排序和二分查找(Javascript)

    var data = [8, 3, 4, 1, 18, 22, 11, 3, 5, 6, 2, 1, 77] quickSort(data, 0, data.length - 1) console.l ...

  10. 测试版和正式版微信小程序共享存储空间问题

    一般习惯将变量存储在小程序的storage缓存中,然后用到的时候再去取.但是有一次我在做小程序相关内容的时候发现,对于苹果手机,测试版本小程序和正式版本小程序的缓存变量是相互通用的.