對於Web前端初學者或者經驗不夠豐富的人來說，出現頁面排版布局混亂的情況並不罕見，有時候明明前面部分的網頁都很整齊美觀，可是在接下來的部分中經常會出現網頁布局混亂，比如content無法調整到開發者需要的位置，或者出現頁面重疊的現象。以下內容是我個人在網頁制作過程中關於網頁排版混亂及其解決辦法的一些經驗總結，不足之處，希望大家互相補充學習。
）DIV+CSS網頁錯位的原因與解決方法
常常我們會遇到我們要設置在一行顯示的布局，卻因為種種原因造成了錯位，看到結果是在一行的最后一個盒子布局錯位掉下去了（如下圖）。
造成DIV CSS網頁布局錯位的原因大概有兩種情況，一種是寬度計算錯誤，一種是IE BUG造成，特別是IE6和IE7。接下來我們挨着為大家介紹錯位與解決錯位方法。
一、寬度計算錯誤解決方法
寬度計算錯誤，假如總寬度為500px，有3個盒子，分別CSS寬度為200px、200px、100px，這個沒問題會在一排顯示不會錯位，但如果加入了CSS邊框、padding、margin屬性時，別忘記這幾個屬性所占的寬度。特別是padding與邊框border占用寬度空間不要忽略了。如果有一個盒子加入左右邊框，這個時候有一個盒子中剛合適的寬度條件下減少2px邊框占用寬度，否則即會總3個盒子合計寬度大於了總寬度，造成錯位。
寬度問題造成CSS布局錯位小結：
內盒子寬度之和大於了外寬度造成錯位，檢查時候我們一定計算設置寬度、邊框、paddind、margin之和。
二、IE BUG特別是IE6和IE7造成錯位
這個問題是最常見的問題，我們檢查完第一點寬度問題，而寬度沒問題，這個時候在IE6、IE7中錯位，在IE8及其它瀏覽器沒有錯位問題，這個時候我們就要考慮到你是否使用了margin屬性，通常我們使用了CSS浮動（CSS float）情況下使用margin（margin-right、margin-left這里特別是這個屬性）此屬性會產生雙倍數值，這個時候我們需要使用css hack解決此問題。讓IE6或IE7單獨識別特指定margin樣式。
如：
1、IE6單獨識別（margin-left對於只有IE6錯位情況下）
{margin-left:5px;_margin-left:2px}
這個時候除IE6外其它瀏覽器設別margin-left:5px，IE6單獨識別_margin-left:2px
2、IE7與IE6都識別（margin-left對於ie6和ie7識別其它版本和品牌瀏覽器不設別）
{margin-left:5px;*margin-left:2px;}
這個時候除IE6和IE7外，其它瀏覽器設別margin-left:5px，IE6和IE7識別*margin-left:2px
更多CSS HACK知識大家可進入CSS HACK欄目了解更多相關知識。
以為為大家總結了常見網頁錯位原因，大家從這以上兩方面入手檢查css布局網頁錯位原因。
-----------------------------------------以上內容部分參考文獻網址http://www.divcss5.com/css-hack/c397.shtml
浮動會造成頁面布局的重疊混亂，這在網頁制作中是非常常見的，我們可以利用以下幾種方法清楚浮動所帶來的影響；
1、出現float影響的根本原因是：父標簽沒有高度，導致光標上移動。如果給父標簽設置固定的高度。可以解決浮動帶來的問題
2、給被受浮動影響的標簽設置clear both來清除浮動所帶來的影響
3、overflow：hidden；設置內容超出部分
除了以上寬度計算錯誤和浮動帶來的影響導致頁面布局混亂，以下幾種情況也會導致頁面布局的混亂
1，margin垂直方向塌陷現象
標簽之間的margin:
垂直方向塌陷現象-----以大的為主
水平方向沒有塌陷現象
2、如果字標簽用margin來描述和父標簽的位置關系，可能出現margin外露，
給父標簽增加overflow：hidden；可以解決
可以用padding來替代margin描述與父標簽的位置關系，margin部分用padding代替，然后減少父標簽相應的高度。