網頁排版中的浮動和定位（學習筆記）
CSS中的浮動和定位
在了解CSS中的浮動和定位之前有必要先了解清楚標準流和脫離標準流的特性
雖然浮動和定位很重要，但是在以後的網頁寫作中，還是盡量少用，最好別亂用，不然後面問題很大，特別是對初學者。最好要把浮動和定位要搞清楚在使用。
標準流的默認特性
1、分行、塊級元素，並且能夠dispay轉換。
2、塊級元素（block）：默認獨占一行，不能並列顯示，能夠設置寬、高，寬度為父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）
3、行內元素（inline）：默認並排顯示，不能設置寬、高，寬度為內容的寬度。例如：span、a、b、i
4、margin-bottom 和margin-top 塌陷，以最大值為準。
脫標的元素的特性
只要是脫離了標準流，元素都是不區分行、塊的，體現在任何元素都可以設置寬、高了。都有了收縮的 性質，就是不設置寬度，就自動縮減為裏面內容的寬度。
浮動的元素有貼邊的性質，絕對定位的元素可以自由定位。
浮動float
浮動可以使塊級元素並排顯示，用於頁面布局。
註意：某個元素設置了浮動，則同級元素都需要設置浮動。
有高度的父盒子不用清除浮動，否則都需要清除浮動：
1）給父盒子加 { overflow: hidden;_zoom:0 /*IE6 的兼容性問題*/}
2）隔墻法：給浮動元素的父盒子下加墻.clear{ clear: both;height: 10px;_font-size: 0; /*IE6 的兼容性問題*/}
定位position
- position:relative; 相對定位
- position:absolute; 絕對定位
- position:fixed; 固定定位
- position:static;默認，沒有定位
1、position: relative;
相對定位不脫標，僅設置position: relative 沒有任何效果
相對定位是相對自己原來的位置進行移動，原位置保留，margin 將作用在原位置上
相對定位的用途非常的小，就是微調元素的位置
2、position:absolute;
絕對定位top left 是以頁面左上角作為參考。在實際應用中很少單獨使用，通常會“子絕父相”給父盒子設置position: relative;（相對定位），這樣子盒子會以父盒子作為參考。
1）絕對定位的盒子，不能以任何方式用margin 影響別的盒子
2）父盒子的padding 不會影響絕對定位的子盒子
3、position:fixed;
相對於瀏覽器窗口為參考定位
CSS中能夠脫標的屬性有3個：
- float:left/right
- position:absolute; 絕對定位
- position:fixed; 固定定位
時刻鼓勵自己：
埋頭讀書，擡頭做人!
不登高山不知天之高也，不臨深溪不知地之厚也
懦弱的人只會裹足不前，莽撞的人只能引為燒身，只有真正勇敢的人才能所向披靡
我們這個世界，從不會給一個傷心的落伍者頒發獎牌。
海浪的品格,就是無數次被礁石擊碎又無數閃地撲向礁石、
鞋底磨穿了，不等於路走到了頭。
松馳的琴弦，永遠奏不出時代的強音。
躺在被窩裏的人，並不感到太陽的溫暖。
不安於現狀，不甘於平庸，就可能在勇於進取的奮鬥中奏響人生壯美的樂間。
不去耕耘，不去播種，再肥的沃土也長不出莊稼，不去奮鬥，不去創造，再美的青春也結不出碩果。
網頁排版中的浮動和定位（學習筆記）