.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. sublime text3安装angularjs插件

    sublime能够支持AngularJS开发那绝对是一件很爽的事情.下面我一步步讲解如何为sublime安装AngularJS插件. 首先提供一个破解版的sublime text 3的下载地址:htt ...

  2. 页面中用Context.Handler传递

       最近被WCF弄得身心疲惫.今天抽空看了一下页面传值的一些技巧.传统的cookie session 什么的就不介绍了 今天介绍Context的用法 首先要应用using System.Runtim ...

  3. Linux 下tomcat的配置

    参考文档:http://blog.csdn.net/jeamking/article/details/7881196 http://www.cnblogs.com/panxuejun/p/618641 ...

  4. 【WEB基础】HTML & CSS 基础入门（6）超链接

    超链接--文字链接 超链接[hyperlink]是网页中最为常见的元素之一,我们几乎可以在所有的网站页面中找到超链接.每个网站都不止一个页面,这些页面就是利用超链接进行串接.超链接帮我们实现了网页与网 ...

  5. Crypto另外两段加密解密的代码

    第一段代码风格-平铺直叙: import sys from Crypto.Cipher import AES from binascii import b2a_hex, a2b_hex class p ...

  6. 利用javascript实现在圆周上匀速划动的动画效果

    先看下效果:          

  7. 在Oracle Linux上安装dtrace

    http://www.ohsdba.cn/index.php?g=Home&m=Article&a=show&id=171   时间: 2016-10-09 00:40:04 ...

  8. MD5进行文件完整性校验的操作方法

    我组产品包含大量音频和图片资源,MD5主要就用来检测这些资源文件的完整性.主要思路是:先计算出所有资源文件的MD5值,存到一个xml文件中,作为标准的MD5值.然后把这个xml文件放到我们的产品中,每 ...

  9. android开发教程之使用线程实现视图平滑滚动示例 改

    package com.melonsapp.messenger.ui.popupuser; import android.os.Handler; import android.view.View; i ...

  10. 怎样高速地安装Ubuntu SDK

    我在先前的文章＂Ubuntu SDK 安装＂中已经具体地介绍了怎样安装Ubuntu SDK．可是非常多的开发人员可能在最后安装SDK所须要的chroots时候会失败．这里面的原因是SDK在安装chro ...