四使用浮動div布局

剛開始學習的小白，如有不足之處還請各位補充，感激涕零。

在html中有兩種方式布局**和，個人劇的使用**布局可以避免bug產生，並且**布局相對來說要容易一些，只是布局方式比較繁瑣，使用者在載入時如果巢狀**過多會造成載入過慢的現象，容易影響使用者體驗。

布局呈現的效果多，可以與**搭配使用，重點是在布局過程中注意的特性，還有定位問題，剛開始使用它的時候，怎麼也避免不了一些錯位，定位上的bug。

問題1：的特性，預設佔一整行，在布局過成功不可忽視的特性，需要配合浮動float來配合使用

問題2：使用float屬性可以讓多個強制到一行，取消了它獨自享有一行的特性。例如乙個外層div巢狀了兩個div

#div

#div1

#div2

那麼他的呈現形勢是這樣的，

因為有佔正行的特性，

這時候我們給兩個小div加上float屬性

}#div1

#div2

就會呈現出這樣的效果，

right有浮動同理

再就是如果兩個浮動中的div寬度總和超出了父級div的寬度，那麼後者浮動的會自動浮動到下一行，

因為這一行裝不下

問題3:的position屬性，控制div的定位

有三種常用的屬性，絕對定位，相對定位，根據瀏覽器定位

絕對定位 position：absolute; 對於body而言效果優先於普通的margin

寫法#div

那麼這個div接下來回根據body向右邊移動100畫素。還有top，right，bottom同理

相對定位 position：relative; 相對於當前位置移動了了幾個畫素，當前位置div1巢狀在div中，那麼移動div1的位置就不是根據body了，而是在div中移動。

漂浮 position ：fixed; 相對於瀏覽器顯示頁面而言的的定位，此屬性設定好了一后，會永遠定在此位置，有滾動條也是如此。

最後：頁面布局之後，為了適應不同解析度的使用者使用，防止解析度變換造成的錯位等問題，可以在每乙個大的內容div外邊套乙個div高度不設定，寬度為100%，這樣就算裡面的div高寬設死了也不會發生太大的錯位。