http://www.w3school.com.cn/css/css_positioning_floating.asp
对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先
元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
创建浮动框可以使文本围绕图像,要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，
它表示框的哪些边不应该挨着浮动框。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<div class="clear"></div>这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进
行布局而添加无意义的标记。
为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这
有助于减少或消除不必要的标记。事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对
页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素,两个元素之间的层次间隔可以是无限的。
h1 > strong {color:red;} 这个规则会把h1 下面的第一层 strong 元素变为红色，但是第二层 strong 不受影响。
a[href][title] {color:red;} 根据多个属性进行选择，只需将属性选择器链接在一起即可。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。