position属性、CSS清除浮动

其中static是默认值，当元素未定义position或定义position值为static时，该元素内定义的top, bottom, left, right 和 z-index无效。

relative表示相对定位，在文档流中仍然占有空间，其参考对象是离该元素最近的父元素。图1表示父元素的position值变化时，子元素（position=relative）与父元素的相对位置，由图可以看出其相对位置不随父元素的position值变化而变化。

 

当其父元素position值均为static或者未定义时，其参考对象应该是document（浏览器视窗大小的矩形）而不是网上所说的body元素或者html元素。为验证以上说法 我们设置下面三组对照，代码如图5所示，其中.fixed和.absolute的css样式如图6所示。.absolute始终完全覆盖在.fixed上，由此可见.absolute的位置没有随html元素和body元素的变化而变化，因此其参考对象不是body元素或者html元素。

fixed表示固定定位，类似于absolute，但是其是根据浏览器窗口定位的。

CSS清除浮动

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动的8种方式：

1.父级div定义 height

2.结尾处加空div标签 clear:both

3.父级div定义 伪类:after

4.   父级div定义 overflow:hidden

5.   父级div定义 overflow:auto

6、父级div 也一起浮动

7.   父级div定义 display:table

8.   结尾处加 br标签 clear:both