.cf:after，.cf:before {content: " "; display: table;}

.cf:after {clear: both;}
：before是因为table类型能生成独立的bfc，防止上边距塌陷，
：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

css 中的伪类选择器before 与after的更多相关文章

  1. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  2. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  3. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  4. 转：vw适配中使用伪类选择器遇到的问题

    地址:https://blog.csdn.net/perryliu6/article/details/80965734 在使用vue init webpack构建的项目中,一开始我准备使用rem布局, ...

  5. CSS选择器之伪类选择器（元素）

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  6. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  7. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  8. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  9. CSS选择器之伪类选择器（交互）

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

随机推荐

  1. 【BZOJ3514】Codechef MARCH14 GERALD07加强版（LCT）

    题意:N个点M条边的无向图,q次询问保留图中编号在[l,r]的边的时候图中的联通块个数. 询问加密,强制在线 n,m,q<=200000 题意:RYZ作业 以下转载自hzwer http://h ...

  2. go1.11新特性，mark一下

    包管理新特性: export GO111MODULE=on #开启modules go mod init # 创建go.mod (我是在项目根目录下输入的命令) ls // 可以看下创建成功 cat ...

  3. CMDB资产管理系统的数据表设计

    Server表: asset = models.OneToOneField('Asset') 主机名(hostname) sn号(sn) 制造商(manufacture) 系统(os_platform ...

  4. ELK之Kibana部署、收集系统日志、一个文件收集多个日志

    1.安装及配置Kibana cd /usr/local/src yum -y install kibana-5.4.0-x86_64.rpm grep "^[a-Z]" /etc/ ...

  5. [Bzoj3172][Tjoi2013]单词（fail树）

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 4777  Solved: 2345[Submit][Status ...

  6. NRapid前言

    开发工具 Visual Studio 2017 数据库 SQL Server 2012 相关技术 Asp.net MVC

  7. sqlfairy用法

    要画一个数据库的ER图,我比较懒,就想用工具来生成. 找了一下,发现一个不错的工具,名字叫sal-fairy 很强大,可以有很多用处. 其中有一个命令sqlt-graph,可以完成生成ER图. 用法如 ...

  8. 转：Twemproxy——针对MemCached与Redis的代理

    转自: http://www.infoq.com/cn/news/2012/12/twemproxy Twemproxy是一个代理服务器,可以通过它减少Memcached或Redis服务器所打开的连接 ...

  9. c++中vector向量几种情况的总结（向量指针，指针的向量）

    1.标准库vector类型 vector 是同一种类型的对象的集合.每一个对象都有一个相应的整数索引值.标准库将负责管理与存储元素相关的内存.我们把 vector 称为容器,是由于它能够包括其它对象. ...

  10. iOS之中国银联移动支付控件升级的问题

    自从11月以来,如果用户安装了集成了中国银联手机支付SDK的app,那么在使用银联支付的时候,会发现,不能调用银联支付方式,并且弹出一个提示”银联手机支付已升级请更新客户端8100010”.如下图: ...