标签：
浮动，可以让页面并排显示，制作干净整洁的布局。有时候需要用到定位的技术。
position属性值有static、fixed、relative、absolute、inherit
float属性值有left、right、none、inherit
设计页面布局时候，常需要用到浮动，它是页面定位的一种基本功能。浮动可以创建一个自然流布局，同时允许元素设置自身尺寸和父元素容器的尺寸大小。
一个元素浮动时候，其位置依赖于其周边元素，其周边元素及其摆放位置取决于围绕他的元素的文档对象模型（DOM）。
浮动也会给其父元素带来影响。如页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。嵌套的元素也可能出现样式错误。针对这样的问题，我们可以采用在父元素中设置清除浮动来解决。关于清除浮动有几种方式：
1.clear：left;
clear:right;
clear:both;
这种方式有一定效果，但不太适合语义化。
2.overflow：auto;
overflow:hidden;
备注：使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。缺点：可能会影响样式的效果，比如盒子阴影效果
3.clearfix
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
定位属性值：
static:默认值，不接受位置属性值设置
relative：相对定位元素的位移是相对于元素自身的边缘进行位移。可以给元素设置位移（offset）“top、right、bottom和left”属性。它们原先的位置仍保留，仍属于自然流。
absolute：脱离文档流。相对于div的父元素进行绝对定位，使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。
fixed：相对于浏览器窗口，不会随滚动条滚动。
元素叠放顺序：
z-index属性用来设置元素的层叠顺序。值越大越在上面。给元素设置“z-index”属性及使用盒子位移属性，都要先在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。
标签：
原文地址：http://www.cnblogs.com/haimengqingyuan/p/5376587.html
