再读《精通css》05：定位、浮动与清理

2.2 定位概述

1、在使用相对定位（relative）时，不论元素是否移动，它仍然占据其原有空间。

2、相对定位被看作是普通文档流的一部分。元素的位置相对于他在普通流中的位置。

3、绝对定位（absolute）使元素的位置与文档流无关，不占据空间，文档流中的元素就像绝对定位的元素不存在一样。

4、绝对定位元素的位置相对于和他最近的已经定位的祖先元素。在相对定位的容器里进行绝对定位很有用，比容下拉菜单等。

5、可对绝对定位的元素设置z-index属性来控制他们的堆叠次序。

6、固定定位（static）时绝对定位一个子类别，不过他相对于窗口，结果就是他不随滚动条而滚动。IE6不支持static定位。

7、浮动元素不在文档的普通流中。普通文档流中的元素就当浮动元素不存在一样。

8、浮动元素如果框的宽度不够，会产生“浮动下降”。如果几个浮动元素的高度不一样，可能会被“卡住”。

9、运用值为hiddeng或auto的overflow属性会自动清除元素内所有的浮动。但overflow属性会影响元素本身的表现。

10、清理浮动方法总结：

a、在浮动元素后面的同辈元素上设置clear属性。

b、对浮动元素的父元素也进行浮动。但最后还是要使用方法a来清理祖先元素的浮动(是浮动复杂，不推荐)。

c、对浮动元素的父元素设置值为hidden或auto的overflow属性(不适应所有情况)。

d、使用css生成的内容清理浮动(IE6中无效)。例如：

<div class="news clear">

<img src="路径"/>

<p>段落</p>

</div>

.news img{float:left;}

.mews p{float:right;}

.clear:after {

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

e、使用js生成浮动清理元素的代码(js有可能被禁用)。