//DIV等标签中的内容垂直居中:

/****************DIV 内容垂直居中样式 Begin:*************/

.verticalMiddle{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;

display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}

/* DIV等标签中内容垂直居中样式 End:*/

//position:为了制作更多复杂的布局，我们需要讨论下 position 属性。

position:static;

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

position:relative;

relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

position:fixed;

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙。令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

position:absolute;

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned” 祖先元素 。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指position 值不是 static 的元素。

参考资料:http://blog.csdn.net/sunlovefly2012/article/details/15026233

//clear 属性被用于控制浮动:

请看下面例子:

.box {
float: left;
width: 400px;
height: 100px;
margin: 1em;
overflow:auto;
border:1px solid red;
}

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

效果图:

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

.afterDiv{

clear:left;

}

效果图:

vcq90rK/ydLUOmNsZWFyOmxlZnQ7yKW19LrzLNTaLmJveNH5yr3W0L2rZmxvYXQ6bGVmdDu4xM6qZGlzcGxheTppbmxpbmUtYmxvY2s7vLS/yS48L3A+CjxwPjxicj4KPC9wPgo8cD4vL7rQxKPQzTrU2s7Sw8fM1sLbv+22yLXEyrG68qOsztLDx9OmuMO9ss/C0+vL/M/gudi1xNK7uPbW2LXj1qrKtqO6utDEo9DNoaO1scTjyejWw8HL1KrL2LXEv+22yKOsyrW8ytW5z9a1xNSqy9jItMTcubuzrLP2xOO1xMno1sOjutLyzqrUqsvYtcSx37/yus3E2rHfvuC74bPFv6rUqsvYoaO/tM/Cw+a1xMD919OjrMG9uPbP4M2sv+22yLXE1KrL2M/Uyr61xMq1vMq/7bbIyLSyu9K70fk7PC9wPgo8cD4uc2ltcGxlIHs8YnI+CiAgICAgd2lkdGg6IDUwMHB4Ozxicj4KICAgICBtYXJnaW46IDIwcHggYXV0bzs8YnI+CiAgICAgYm9yZGVyOjFweCBzb2xpZCByZWQ7PC9wPgo8cD59PGJyPgouZmFuY3kgezxicj4KICAgICB3aWR0aDogNTAwcHg7PGJyPgogICAgIG1hcmdpbjogMjBweCBhdXRvOzxicj4KICAgICBwYWRkaW5nOiA1MHB4Ozxicj4KICAgICBib3JkZXItd2lkdGg6IDEwcHg7PGJyPgogICAgIGJvcmRlcjoxMHB4IHNvbGlkIHJlZDs8YnI+Cn08YnI+CjwvcD4KPHA+PGRpdiBjbGFzcz0="simple ">盒模型