1.解決高度塌陷方
解決高度塌陷方案二：
可以直接在高度塌陷的父元素的最后锥咸，添加一個空白的div史隆，由于這個div并沒有浮動赖临，所以他是可以撐開父元素的高度的
然后再對其進行清除浮動鳞滨，這樣可以通過這個空白的div來撐開父元素的高度芬骄，基本沒有副作用
使用這種方式雖然可以解決問題卒稳，但是會在頁面中添加多余的結(jié)構(gòu)
2解決高度塌陷方
/*通過after偽類蹋半，選中box1的后邊*/
/*
可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動充坑，
這樣做和添加一個div的原理一樣减江，可以達到一個相同的效果，
而且不會在頁面中添加多余的div捻爷，這是我們最推薦使用的方式辈灼，幾乎沒有副作用
*/
.clearfix:after{
/*添加一個內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個塊元素*/
display: block;
/*清除兩側(cè)的浮動*/
clear: both;
}
/*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理*/
.clearfix{
zoom: 1;
2.相對定位
定位：
- 定位指的就是將指定的元素擺放到頁面的任意位置
通過定位可以任意的擺放元素
- 通過position屬性來設置元素的定位
-可選值：
static：默認值，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
當元素的position屬性設置為relative時也榄，則開啟了元素的相對定位
1.當開啟了元素的相對定位以后茵休，而不設置偏移量時，元素不會發(fā)生任何變化
2.相對定位是相對于元素在文檔流中原來的位置進行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質(zhì)手蝎，塊還是塊榕莺，內(nèi)聯(lián)還是內(nèi)聯(lián)
position: relative;
當開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設置元素的偏移量
left：元素相對于其定位位置的左側(cè)偏移量
right：元素相對于其定位位置的右側(cè)偏移量
top：元素相對于其定位位置的上邊的偏移量
bottom：元素相對于其定位位置下邊的偏移量
通常偏移量只需要使用兩個就可以對一個元素進行定位棵介，
一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位
3.絕對定位
當position屬性值設置為absolute時钉鸯，則開啟了元素的絕對定位
絕對定位：
1.開啟絕對定位，會使元素脫離文檔流
2.開啟絕對定位以后邮辽，如果不設置偏移量唠雕，則元素的位置不會發(fā)生變化
3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進行定位的（一般情況吨述，開啟了子元素的絕對定位岩睁，都會同時開啟父元素的相對定位）
如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質(zhì)：
內(nèi)聯(lián)元素變成塊元素揣云，
塊元素的寬度和高度默認都被內(nèi)容撐開
4.固定定位
當元素的position屬性設置fixed時捕儒，則開啟了元素的固定定位
固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
不同的是：
固定定位永遠都會相對于瀏覽器窗口進行定位
固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
IE6不支持固定定位
5.元素的層級
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*開啟絕對定位*/
position: absolute;
/*設置偏移量*/
top: 100px;
left: 100px;
/*
如果定位元素的層級是一樣刘莹，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數(shù)作為值阎毅，該值將會作為當前元素的層級，層級越高点弯，越優(yōu)先顯示
對于沒有開啟定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
設置元素的透明背景
opacity可以用來設置元素背景的透明扇调，它需要一個0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
*/
opacity: 0.5;
/*
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度，需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6抢肛，但是這種效果在IE Tester中無法測試
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*開啟相對定位*/
position: relative;
/*父元素的層級再高狼钮，也不會蓋住子元素*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*開啟絕對定位*/
position: absolute;
z-index: 10;
}
