css定位

css的三种几本定位机制：普通流，浮动，绝对定位

除非专门指定，否则所有框都在普通流中定位。块级元素从上到下一个接一个排列，垂直距离由框的垂直空白边计算

浮动：

左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘

下面具体说对于不同的浏览器浮动的不同表现形式：

火狐浏览器：其他元素可能会出现在浮动元素的下面，被浮动元素覆盖。（只对设置了高度和宽度的块元素有效，块元素内字符始终不会相互覆盖），对于行内元素和没有设置高度和宽度的块级元素，浮动元素不会和其他元素相互覆盖。

谷歌浏览器：处理浮动元素时在任何时候浮动元素都不和其他元素重叠，忽略元素width和height设置的值

IE浏览器：浮动元素不和其他元素重叠。忽略浏览器顶端元素的top空白。不给浮动的块级元素和与之相邻的普通块元素设置高度宽度，不会发生重叠现象。

清除浮动：

1.添加空的div，作为最后一个子标签放在父元素中，兼容性强，但是不设置高度height：0时有时会出现空白高度

2.overflow+zoom方法：（在父元素中添加该属性）

必须定义width，为了激活haslayout，zoom：1;不能定义height，用overflow：hidden时浏览器自己检测浮动高度，不能和position配合使用

3.after伪类+zoom方法

父元素的样式中必须有：content：“.”（可以为别的值，或者不填）,line-height:0;(也可以为height：0)

绝对定位：

相对于最近已定位的祖先元素，没有父元素则相对于最初的包含块。与文档流无关，不占据空间。普通文档流中的其他元素就当绝对定位的元素不存在一样。

相对定位：

无论是否进行移动，元素仍然占据原来的空间，移动元素会导致它覆盖其他框。相对于元素在文档流中的初始位置。

背景图片定位基础：

像素定位：图像左上角到元素左上角的距离为指定像素

百分比定位：使用图像上的一个对应点，实际上将图像上距离左上角n%的点定位到父元素上距离左上角n%的位置