当一个父元素包含多个浮动的子元素的时候，子元素的浮动确定了他们的位置，但是子元素不会影响父元素的宽度，使父元素塌陷，从而使父元素高度为0，这个时候可以为父元素清除浮动，从而阻止父元素塌陷。
1.overflow方法
对父元素设置overflow：hidden；
但是overflow清除浮动会有一些缺点。
2.clearfix方法
清除浮动更好的方法是clearfix
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。
1 .box-set:before, 2 ????????.box-set:after { 3 ????????????content: ""; 4 ????????????display: table; 5 ????????} 6 ????????.box-set:after { 7 ????????????clear: both; 8 ????????} 9 ????????.box-set {10 ????????????*zoom: 1;11 ????????}但是每次都为父元素设置太麻烦，可以单独设置一个类用来清除浮动，当有父元素需要清除浮动的时候把这个类加给父元素就可以
.clearfloat:before, ???????.clearfloat:after { ???????????content: ""; ???????????display: table; ???????} ???????.clearfloat:after { ???????????clear: both; ???????} ???????.clearfloat { ???????????*zoom: 1; ???????}<div class=‘parent‘,‘clearfloat‘></div>
值得注意的是，目前每个元素只有一个“:before”和“:after”伪类。当你尝试使用其他的“:before”和“:after”的clearfix技巧，你的内容可能无法达到想要的效果。
position有4个属性 static relative absolute fixed
元素都有position属性，默认值为static，意为静止的，指他们不接受位置属性设置（top bottom left right）
position:relative;
相对定位，相对于元素开始的位置，使用位置属性设置，需要注意的是，使用相对定位的元素原位置扔占据这正常的文档流，别的元素无法占据相对定位元素原来的位置。
position:absolute;
绝对定位，绝对定位的位置和父元素有关系，绝对定位要求祖先元素至少有一个不是static定位。否则就相对于body进行定位。使用位置属性相对于其祖先元素进行定位，需要注意的是绝对定位的元素会脱离原来的文档流，原来的位置可以被其他元素占据。
position:fixed;
固定定位，相对于浏览器窗口进行定位。元素会脱离原来的文档流。ie6不支持fixed属性。
z-index属性可以改变元素的层叠属性。给元素设置z-index属性要求元素的position属性至少是relative absolute fixed中的一种。
.box1{ ???z-index:3; ?}.box2{ ???z-index:2;}.box3{ ???z-index:1}第一个盒子在第二个和第三个上面，第二个盒子在第一个上面
css 清除浮动 ?定位 ?z-index属性
原文地址：http://www.cnblogs.com/liubinghaoJavaScript/p/7580803.html