css常用属性解析篇

clear:both(清除浮动float)一定要与属性display:block结合使用；常用方法：<div class="clear"></div>由于DIV本身属于块级元素，故只需定义属性.clear {clear:both;}即可。

:after和:before属于伪类选择器；用于在元素的内容之后或内容之前添加新内容。p:after{content:"hello world";color:red;}

例如：<p>你好!</p> 使用以上样式之后变成-->你好！hello world

display:inline和display:inline-block的区别

二者都是将元素设置为内敛元素；若元素属性设定为display:inline，则元素的高度和宽度不可改变；后者是对前者的进一步加强，属于行内的块级元素，它是允许改变高度和宽度的。

默认情形下，块级元素是独占一行的；

若避免此情形，可以设置元素浮动；

以下两种使用方式效果都是一样的。一个用了clear:both，一个没用，使用了overflow:hidden;

<style>
#main { height:auto;overflow:hidden;width:980px;background:grey;}
.fleft{float:left;width:100px;height:100px;background:red;}

.fright{float:right;width:100px;height:150px;background:yellow;}

.clear {clear:both;}

</style>

方式（1）

<div id="main">

        <div class="fleft"></div>

        <div class="fright"></div>

</div>

<div>can you see me?</div>

方式（2）

<div id="content">

        <div class="fleft"></div>

        <div class="fright"></div>

  <div class="clear"></div>

        <!--内置div设置成浮动后，清除浮动，可将外部的div撑起来-->

</div>

<div>can you see me?</div>