CSS3动态/动画里面的伪类运用比较多，由于要兼容很多的版本的浏览器，个人又不喜欢用MVC框架，就总结了一些单独使用伪类或混合伪类的用法，给前端的小伙伴们一些启发。下面介绍运用较多的伪类:after、:before

用:after、:before清除浮动

在自适应布局中，经常遇到浮动问题，一般来说下一个div会继承上一个div的浮动属性（左浮动、右浮动），即使他们是独立div（非同一父级）。为避免造成页面布局混乱，需要清除上一div的浮动属性，举个例子

HTML部分

<div class="Main">
  <div class="FloatLeft">左浮动</div>
  <div class="FloatRight">右浮动</div>
</div>
<div class="OtherDiv">其他Div</div>

CSS部分写法1

<style>
 .FloatLeft{float:left}
 .FloatRight{float:right}
 .OtherDiv:before{content:" ";clear:both}
</style>

CSS部分写法2

<style>
 .FloatLeft{float:left}
 .FloatRight{float:right}
 .Main:after{content:"";clear:both}
</style>

避免出现如下的HTML写法

<div class="Main">
  <div class="FloatLeft">左浮动</div>
  <div class="FloatRight">右浮动</div>
</div>
<div class="Clearfix"></div>
<div class="OtherDiv">其他Div</div>

CSS部分

<style>
 .Clearfix{clear:both}
</style>

Clearfix这个Div是空的，因是行间元素（默认占用一行），可以写CSS样式清除继承浮动属性，虽然能实现这个功能，但是前端代码不够简洁，尽量采用嵌套写法，把Div归类，下面是吖七推荐写法。

HTML部分

<div class="Main Clearfix">
  <div class="FloatLeft">左浮动</div>
  <div class="FloatRight">右浮动</div>
</div>
<div class="OtherDiv">其他Div</div>

CSS部分

<style>
 .Clearfix:after{clear:both}
</style>