CSS中的浮動和定位

在瞭解CSS中的浮動和定位以前有必要先了解清楚標準流和脫離標準流的特性

標準流的默認特性

一、分行、塊級元素，而且可以dispay轉換。

二、塊級元素（block）：默認獨佔一行，不能並列顯示，可以設置寬、高，寬度爲父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）

三、行內元素（inline）：默認並排顯示，不能設置寬、高，寬度爲內容的寬度。例如：span、a、b、i

四、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;默認，沒有定位

一、position: relative;

相對定位不脫標，僅設置position: relative 沒有任何效果

相對定位是相對本身原來的位置進行移動，原位置保留，margin 將做用在原位置上

相對定位的用途很是的小，就是微調元素的位置

二、position:absolute;

絕對定位top left 是以頁面左上角做爲參考。在實際應用中不多單獨使用，一般會「子絕父相」給父盒子設置position: relative;（相對定位），這樣子盒子會以父盒子做爲參考。

1）絕對定位的盒子，不能以任何方式用margin 影響別的盒子

2）父盒子的padding 不會影響絕對定位的子盒子

三、position:fixed;

相對於瀏覽器窗口爲參考定位

CSS中可以脫標的屬性有3個：

• float:left/right
• position:absolute; 絕對定位
• position:fixed; 固定定位