.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. linux命令dhclient

    linux命令 dhclient 背景 多台服务器(CentOS7 系统)设置静态IP,其中有台服务器设置了静态IP后,只要重启就变更为其他的,但是配置文件并无改动. 使用命令 #自动获取IP dhc ...

  2. Win10下安装虚拟机提示“Intel VT-x处于禁用状态”如何解决

    今天在自己的笔记电脑上想安装一个Kali虚拟机学习用,安装的时候遇到这个问题,提示"Intel VT-x处于禁用状态". 要进入Win10的BIOS,先进入"设置&quo ...

  3. miller_rabin + pollard_rho模版

    #include<stdio.h> #include<stdlib.h> #include<time.h> #include<math.h> #incl ...

  4. 中国余数定理 2(codevs 3990)

    题目描述 Description Skytree神犇最近在研究中国博大精深的数学. 这时,Sci蒟蒻前来拜访,于是Skytree给Sci蒟蒻出了一道数学题: 给定n个质数,以及k模这些质数的余数.问: ...

  5. laravel的视图

    //输出视图 //建立控制器方法public function hello_test(){ return view('member/hello_test',['name'=>'张三','age' ...

  6. call 和 apply 方法区别

    在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别,下面我来给大家介绍一下call和apply用法. 在web前端开发过程中,我们经常需要改变th ...

  7. java连oracle

    下载连接驱动 安装完oracle之后 D:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib 目录下拷贝 支持jdk1.6以上 From.java ...

  8. Codeforces 849B Tell Your World (计算几何)

    题目链接 Tell Your World 题意 给出N个点(i, xi),问是否存在两条平行的直线,使得每一个点恰好在两条直线的其中一条上. 每条直线必须穿过至少一个点. 考虑每个点和第1个点的斜率, ...

  9. 创建ROS工作空间和包

    一.创建工作空间 mkdir -p ~/openni_ws/src cd ~/openni_ws catkin_make        //在catkin工作空间(openni_ws)下catkin_ ...

  10. java队列--queue详细分析

    ---恢复内容开始--- Queue:基本上一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List.Set同一级别,都是继承了Collection接口,LinkedList实现了Li ...