@參考文檔：http://www.divcss5.com/rumen/r674.shtml
可能您遇到過上下結構的布局，下面DIV內容重疊上面DIV內容上，也可能下面內容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現象；您也可能遇到過相鄰的兩個DIV盒子發生重疊覆蓋現象，這些是什么問題如何解決？
一、上下結構DIV盒子覆蓋
1、首先網站DIV CSS實例HTML代碼
<!DOCTYPE html>
<html>
<head>
<title>DIVCSS5實例 DIV與DIV覆蓋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxa,.boxb{ margin:0 auto; width:400px;}
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
.boxb{ border:1px solid #000; height:40px; background:#999}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">內容左</div>
<div class="boxa-r">內容右</div>
</div>
<div class="boxb">boxb盒子里的內容</div>
</body>
</html>
2、實例效果截圖
3、問題分析
一般想需要將“.boxa”和“.boxb”布局是上下結構，從上圖發現在瀏覽器中看到效果是兩個盒子里內容是實現上下結構效果，但“.boxb”這個DIV跑到“.boxa”下面去了，但內容沒有發生覆蓋，只有DIV發生覆蓋現象。
這個原因是因為第一個大盒子里的子級使用了浮動float屬性而產生了浮動，所以導致“.boxa”沒有被撐開，而同級的“.boxb”盒子與“.boxa”緊貼，而“.boxa”高度沒有，“.boxa”的子級浮動的與“.boxb”不是同級，“.boxb”盒子依然認為“.boxa”沒有高度(沒有被撐開)，所以boxb就跑上去了，所以導致“.boxb”DIV盒子就跑到“.boxa”子級DIV盒子下面形成了覆蓋重疊現象。
4，問題解決方法
要么清除浮動，要么設置“.boxa”高度，一般情況下文字內容不確定多少就不能設置固定的高度，所以一般不能設置“.boxa”高度(當然能確定內容多高，這種情況下“.boxa”是可以設置一個高度即可解決覆蓋問題。
這里就使用CSS清除浮動方法解決上下結構DIV重疊覆蓋問題，清除浮動有兩種方法，方法如下。
4-1：css clear清除浮動
在“.boxa”盒子</div>閉合前加clear樣式清除浮動。
<!DOCTYPE html>
<html>
<head>
<title>DIVCSS5實例 DIV與DIV覆蓋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxa,.boxb{ margin:0 auto; width:400px;}
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
.boxb{ border:1px solid #000; height:40px; background:#999}
.clear{ clear:both}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">內容左</div>
<div class="boxa-r">內容右</div>
<div class="clear"></div>
</div>
<div class="boxb">boxb盒子里的內容</div>
</body>
</html>
使用clear樣式清除浮動
4-2：css overflow清除浮動
此方法與上一方法更為簡便簡單，只需對“.boxa”（子級有浮動的父級盒子加overflow:hidden）
二、相鄰兩個DIV重疊覆蓋
這種新手出現這種問題比較多，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動，這樣照成兩個DIV覆蓋重疊現象。
1、出問題完整CSS+DIV代碼
<!DOCTYPE html>
<html>
<head>
<title>DIVCSS5實例 DIV與DIV覆蓋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.aa{ float:left; border:1px solid #333; background:#FFF;height:50px;}
.bb{ border:1px solid #F00;background:#CCC; height:80px}
</style>
</head>
<body>
<div class="aa">我是aa里內容</div>
<div class="bb">我是BB里內容</div>
</body>
</html>
介紹代碼：設置兩個盒子使用class命名分別為“.aa”和“.bb”，一個設置float:left一個設置沒有設置，一個設置背景為白色,一個設置背景顏色為灰色，一個高度設置50px，一個設置高度為80px，一個邊框為黑色，一個邊框為紅色。
3、問題分析
從上圖或瀏覽器測試案例可以看出，“.aa”對應DIV盒子浮動覆蓋在“.bb”對應DIV盒子之上，但內容沒有覆蓋，這是因為“.aa”對應DIV盒子使用了浮動，而同級“.bb”對應DIV盒子沒有使用浮動，一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。
4、解決方法
要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。比如這里“.aa”對應盒子會固定寬度為300px;這個使用對“.bb”對應盒子設置margin-left:302px（大於300即可，自己測試設置需要的值）實現不重疊覆蓋現象。
@總結注意事項：
1，overflow:hidden;可以解決div相互重疊問題。因為它能清除浮動。因為浮動才引起的div重疊問題。
2，相對定位也會導致div相互重疊！！！
布局中注意的一個問題，就是一個div如果使用了相對定位relative，並且相對自己原位置發生了偏移，就會偏移到其他div的位置(不會把其他標簽撐開，而是產生重疊)，例如一個div向下偏移了20px，那么下邊的div就會和上邊的div發生重疊。解決方法？對下邊的div也設置相對定位relative屬性，並發生20px的位移，就可以了。