//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;
}
在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？
使用 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 ">盒模型
