可能您遇到過上下結構的布局，下面DIV內容重疊上面DIV內容上，也可能下面內容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現象；您也可能遇到過相鄰的兩個DIV盒子發生重疊覆蓋現象，這些是什么問題如何解決？

接下來通過案例來演示這兩種兼容性DIV覆蓋重疊現象問題，并解釋原因與解決方法。

上下結構DIV盒子覆蓋 首先實例HTML代碼

 !DOCTYPE html  html  head  title 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 >

可拷貝代碼自己動手發現DIV覆蓋現象。

實例代碼說明：

設置兩個大div盒子分別CSS命名為“.boxa”和“.boxb”，設置寬度相同均為400px,對“.boxb”設置一個黑色邊框與高為40px、背景為黑色的；然后在boxa里添加兩個一個靠左一個靠右CSS命名分別為“.boxa-l”“.boxa-r”，兩個小盒子，同時設置紅色邊框、css高為80px、寬度分別為280px和100px。

問題分析

一般想需要將“.boxa”和“.boxb”布局是上下結構，從上圖發現在瀏覽器中看到效果是兩個盒子里內容是實現上下結構效果，但“.boxb”這個DIV跑到“.boxa”下面去了，但內容沒有發生覆蓋，只有DIV發生覆蓋現象。

這個原因是因為第一個大盒子里的子級使用了浮動float屬性而產生了浮動，所以導致“.boxa”沒有被撐開，而同級的“.boxb”盒子與“.boxa”緊貼，而“.boxa”高度沒有，“.boxa”的子級浮動的與“.boxb”不是同級，“.boxb”盒子依然認為“.boxa”沒有高度，所以導致“.boxb”DIV盒子就跑到“.boxa”子級DIV盒子下面形成了覆蓋重疊現象。

問題解決方法

要么清除浮動，要么設置“.boxa”高度，一般情況下文字內容不確定多少 就不能設置固定的高度，所以一般不能設置“.boxa”高度(當然能確定內容多高，這種情況下“.boxa”是可以設置一個高度即可解決覆蓋問題。)。

這里就使用CSS清除浮動方法解決上下結構DIV重疊覆蓋問題，清除浮動有兩種方法，方法如下。

css clear清除浮動

在“.boxa”盒子 /div 閉合前加clear樣式清除浮動。

完整HTML源代碼：

 !DOCTYPE html  html  head  title 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 >

此方法與上一方法更為簡便簡單，只需對“.boxa”（子級有浮動的父級盒子加overflow:hidden）

CSS DIV實例代碼如下：

 !DOCTYPE html  html  head  title DIV與DIV覆蓋 /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 >

解決DIV覆蓋的問題就這樣給大家解決了。更多精彩請關注php 其它相關文章！

相關閱讀：

CSS里怎么使用border-radius

HTML的表格樣式

html的編輯轉換器

以上就是HTML里DIV相互重疊怎么辦的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。