關於web頁面佈局的一些收穫

浮動佈局的混亂問題：

初學者常常會有的一個困惑，佈局已經寫好了，看起來也挺美觀了，可是當把視窗放大或縮小以後，畫面瞬間就摻不忍睹了——許多塊莫名其妙地跑到其他地方去了，歪歪斜斜的，讓人抓狂。為啥會這樣呢？百思不得其解，然後又把浮動佈局又一個個改為定位佈局，結果還是這樣。。。其實，只需要明白一個點——你的那些塊都是直接放在body下的，瀏覽器就會預設你那些塊是相對於瀏覽器的視窗而設定的了，此時你的佈局自然也是相對瀏覽器視窗的大小而言的了，他們會死死跟著瀏覽器的視窗變，視窗小了那就被擠到下邊去了，大了也會被擠到其他地方去。此時，你只需要在這些塊的外邊再套一層設定了固定寬度的div就可以了，這時你再去伸縮瀏覽器視窗，那些塊也只會跟著它們上面一層div的寬度去動作了，而上面的那層div寬度已經設定為一個固定值得寬度了，所以自然塊們也就被老老實實安定下來了，擠的時候就會自動加上滾動條。
 所以記住嘍，採用浮動佈局時需要在浮動塊外層再新增一個固定寬度的div，這樣設定了浮動的塊才不會隨著瀏覽器的伸縮而掉（被擠到）到下面去哦。