div覆蓋div,出現div與div盒子之間產生重疊覆蓋現象，而內容沒有出現覆蓋重疊現象原因與解決方法。DIVCSS5通過CSS圖文案例介紹產生原因與解決方法。DIV與DIV覆蓋原因與解決方法。 可能您遇到過上下結構的布局，下面DIV內容重疊上面DIV內容上，也可能下面內容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現象；您也可能遇到過相鄰的兩個DIV盒子發生重疊覆蓋現象，這些是什么問題如何解決？ 接下來DIVCSS5通過案例來演示這兩種兼容性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> 可拷貝代碼自己動手發現DIV覆蓋現象。 實例代碼說明： 設置兩個大div盒子分別CSS命名為“.boxa”和“.boxb”，設置寬度相同均為400px,對“.boxb”設置一個黑色邊框與高為40px、背景為黑色的；然后在boxa里添加兩個一個靠左一個靠右CSS命名分別為“.boxa-l”“.boxa-r”，兩個小盒子，同時設置紅色邊框、css高為80px、寬度分別為280px和100px。 2、問題分析 一般想需要將“.boxa”和“.boxb”布局是上下結構，從上圖發現在瀏覽器中看到效果是兩個盒子里內容是實現上下結構效果，但“.boxb”這個DIV跑到“.boxa”下面去了，但內容沒有發生覆蓋，只有DIV發生覆蓋現象。 這個原因是因為第一個大盒子里的子級使用了浮動float屬性而產生了浮動，所以導致“.boxa”沒有被撐開，而同級的“.boxb”盒子與“.boxa”緊貼，而“.boxa”高度沒有，“.boxa”的子級浮動的與“.boxb”不是同級，“.boxb”盒子依然認為“.boxa”沒有高度，所以導致“.boxb”DIV盒子就跑到“.boxa”子級DIV盒子下面形成了覆蓋重疊現象。 3、問題解決方法 要么清除浮動，要么設置“.boxa”高度，一般情況下文字內容不確定多少 就不能設置固定的高度，所以一般不能設置“.boxa”高度(當然能確定內容多高，這種情況下“.boxa”是可以設置一個高度即可解決覆蓋問題。)。 這里就使用CSS清除浮動方法解決上下結構DIV重疊覆蓋問題，清除浮動有兩種方法，方法如下。 3-1：css clear清除浮動 在“.boxa”盒子</div>閉合前加clear樣式清除浮動。 完整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} .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> 3-2：css overflow清除浮動 此方法與上一方法更為簡便簡單，只需對“.boxa”（子級有浮動的父級盒子加overflow:hidden） CSS DIV實例代碼如下： <!DOCTYPE html> <html> <head> <title>潛水曝氣機</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa{ overflow:hidden} .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>