.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. hdu 3711

    #include<stdio.h> #include<math.h> #include<stdlib.h> int cmp(const void *a,const ...

  2. 如何快速下载maven依赖jar包

    找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...

  3. docker命令解析

    1.docker run --name lllllll  -d -p 8080:8080 -p 9000:9000  镜像id          将docker8080端口映射到服务器的8080端口 ...

  4. 大数(bzoj 4542)

    /* 想了半天莫队,不知道咋转移,需要动下脑子. 有一个很显然的结论是如果(l,r)是P的倍数,那么s[l...n]%P=s[r+1...n]%P. 根据这个东西,我们预处理出所有的后缀%P的余数,接 ...

  5. 济南学习 Day 5 T2 am

    車(Rook) [题目描述] 众所周知,車是中国象棋最厉害的棋子之一,他能吃到同一行或者同一列的其他棋子.車显然不能和車在一打起来,于是rly有借来了许多许多車在棋盘上摆了起来...... 他想知道, ...

  6. 【Codeforces Round #504 (Div. 1 + Div. 2) 】

    A:https://www.cnblogs.com/myx12345/p/9843678.html B:https://www.cnblogs.com/myx12345/p/9843709.html ...

  7. 标准C程序设计七---20

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  8. flask-script插件

    首先在启动Flask项目时,我们可以传不同的参数作为运行参数.但是我们只能在入口app.run()传参.这样十分的不方便.Flask-Script 是一个 Flask 扩展,为 Flask 程序添加了 ...

  9. CodeForces - 813C The Tag Game(拉格朗日乘数法,限制条件求最值)

    [传送门]http://codeforces.com/problemset/problem/813/C [题意]给定整数a,b,c,s,求使得  xa yb zc值最大的实数 x,y,z , 其中x ...

  10. Java计算文件MD5值代码

    原文:http://www.open-open.com/code/view/1424930488031 import java.io.File; import java.io.FileInputStr ...