第6天 css
1.為什麼要清除浮動？
因此在一些盒子中不方便賦予高度，比如在新聞文章中，文章內容每天是不定的。
浮動的圖片，不能跨越 內邊距。
清除浮動，是在父盒子不給定高度的情況下，若子盒子都為浮動，即父盒子沒有了高度，height=0，下一個盒子可能“頂上來”，若給定父盒子高度，子盒子的內容可能會超出父盒子邊界。
1.1若設定 clear:both （清除所有浮動）可解決（clear：left 清除左浮動；clear:right 清除右浮動），父盒子高度隨子盒子最大而定。
1.2 在最後一個子盒子後邊新增一個便籤，如div <div class="clear"></div> \ 或者 <div style="clear:both"></div>
.clear{
clear:both;
}
1.3 父級標籤新增 overflow:hidden ,觸發BFC 機制；
1.4 偽類元素after 清除浮動
.clearfix: after {
content:" ";
display:block;
clear:both;
visibility:hidden;
height:0;
}
.clearfix {
*zoom:1;
}
1.5 雙偽類標籤清除浮動
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1; // 考慮到IE6、7的相容性
}
<div class="nav" clearfix>
</div>
2.相對定位（position:relative）top: npx; right:n2px;
以自己盒子的左上角為中心，向下移動npx,向右移動n2px; 移動後原位置保留，浮動元素不能“頂上去”；
3.絕對定位（position:absolute）top:n1px; left:n2px; 絕對定位，不佔位置。
無父盒子無定位的情況下，以當前螢幕的頁面左上角為中心，向上左方向移動。
right:0px;bottom:0px;以右下角為中心。
若父元素有定位，則以父元素 左上角為基準；若父元素無定位，父父元素有定位，則以父父元素左上角為基準，以此內推。
4.“子絕 父相” 子盒子絕對定位，父盒子相對定位。
在廣告欄中經常出現 滾動的小圓圈廣告。小圓圈為子盒子，懸停在圖片上，不佔空間，因此可以為絕對定位。對父盒子而言，如果其為絕對定位，那其不佔空間，子盒子為相對定位時，無法以父盒子為基準，可能跑出父盒子外，再者，與父盒子相鄰的其他盒子元素會“頂上來”。
5.浮動 並不是真正意義上的完全“脫標”，能做到完全“脫標”的是position:absolute;
eg:<div class=“star”>小星星</div>
<div>小月亮</div>
.star {
float：left；
}
.star {
position:absolute;
}
第一種後面那個div 會“頂”上去，但其內容文字還是在原位置，因此不是完全的“脫標”；
第二種 則是全部“頂”上去。
6.定位的盒子居中對齊
例如在輪播效果圖中位於輪播圖之上的小圓圈，
若盒子加了定位，position:absolute; 或浮動 float：left /right。則margin:0 auto 盒子居中對齊失效。
7.絕對定位：Position：absolute,表示元素無固定位置，在螢幕上可任意滑動覆蓋，當元素屬性為絕對定位，有隱式轉換為行內塊元素的作用，大小與內容有關。可設定 top.left,right,bottom 的值，即在父盒子的上、左、右、下方位多少；
將盒子都為絕對定位，下面其他的盒子會“頂”上去。後來者居上，重疊上去。
固定定位是特殊的絕對定位，只是以當前所見的瀏覽器為“父”。例如某網站左右側欄廣告一直顯示效果，並不隨滾動條移動而變化。
8.只有定位才有層疊屬性：z-index:0(預設為0)，數字越大，層級越高，即將層疊與其他圖片之上顯示。在下拉選單中很常見。
9.相對定位，絕對定位，固定定位都是“脫離”標準流的（浮在標準流上），只不過相對定位佔有固定位置，（相對定位比標準流高一級）絕對定位和固定定位不佔用位置。
相對定位由於佔有位置，在將浮動元素設定為相對定位時，它會第一個浮動出現（若不設定其他元素z-index ）。
標準流 設定相對定位，層級提升。若都為相對定位，設定z-index 屬性大小，層級提升，優先顯示。