.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. STL中heap用法

    #include<cstdio> #include<iostream> #include<algorithm> using namespace std; ]={,, ...

  2. 素数判定 2(codevs 1702)

    题目描述 Description 一个数,他是素数么? 设他为P满足(P<=263-1) 输入描述 Input Description P 输出描述 Output Description Yes ...

  3. ⑨要写信(codevs 1697)

    题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比普通的妖精更危险.一直在释放冷气的她周围总是非常寒冷. 由于以下三点原因…… 琪露诺的符卡 冰符“Icicle ...

  4. PHP验证码显示不出来

    PHP验证码显示不出来 验证码图片显示不出来,原因一般有三种(网上基本一致这几种原因): (1)php没有安装gd2模块,可以使用phpinfo()函数查看. (2)代码很可能是使用了像editpul ...

  5. 通过Nginx 的反向代理来加强kibana的访问安全

    https://blog.csdn.net/choelea/article/details/57406086

  6. org.dom4j.IllegalAddException: No such namespace prefix: *** is in scope on: org.dom4j.tree.DefaultElement (dom4j写入XML文件,标签中带【:】(冒号)解决办法)

    用dom4j操作写XML文件,标签中含有冒号,会报 org.dom4j.IllegalAddException: No such namespace prefix: *** is in scope o ...

  7. 微信小程序,不同的输入框显示

    <!--pages/index/Component/TextInput/TextInput.wxml--> <view class="viewTitle"> ...

  8. Solidworks如何绘制标准螺纹线

    1 绘制螺旋线,螺距为0.5mm,圈数为15,起始角度为0°.   2                

  9. SAE云平台的使用

    参考文章:http://www.cnblogs.com/luyangsblog/p/3956135.html                 Web开发从零单排之一:在新浪云平台SAE上开发一个htm ...

  10. Oracle创建JOB定时任务

    --- DECLARE JOB NUMBER;BEGIN      DBMS_JOB.SUBMIT(          JOB=>JOB,          WHAT=>'CTABLE_T ...