这个两个伪元素在真正页面元素内部之前和之后添加新内容。可以用以下例子来说明：
<p>wonyun!</p>
<style>
p:before{content: "hello "}
p:after{content: "you are handsome!"}
</style>
上面例子从技术角度看，等价于下面的html结构：
<p>
<span>hello</span>
wonyun!
<span>you are handsome!</span>
</p>
由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮
.clear-fix{zoom:1;*zoom:1;}
.clear-fix:after{content: " ";height: 0;visibility: hidden;display: block;clear: both;}
