css 清除浮动 定位 z-index属性

标签：set   有关   index   其他   机制   sla   基于   pre   绝对定位   

当一个父元素包含多个浮动的子元素的时候，子元素的浮动确定了他们的位置，但是子元素不会影响父元素的宽度，使父元素塌陷，从而使父元素高度为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属性

标签：set   有关   index   其他   机制   sla   基于   pre   绝对定位   

原文地址：http://www.cnblogs.com/liubinghaoJavaScript/p/7580803.html