可拷貝代碼自己動手發(fā)現(xiàn)DIV覆蓋現(xiàn)象。

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

2、實例效果截圖

代碼在DW軟件中，效果瀏覽器截圖

3、問題分析
一般想需要將“.boxa”和“.boxb”布局是上下結構，從上圖發(fā)現(xiàn)在瀏覽器中看到效果是兩個盒子里內(nèi)容是實現(xiàn)上下結構效果，但“.boxb”這個DIV跑到“.boxa”下面去了，但內(nèi)容沒有發(fā)生覆蓋，只有DIV發(fā)生覆蓋現(xiàn)象。

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

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

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

4-1：css clear清除浮動
在“.boxa”盒子閉合前加clear樣式清除浮動。

完整HTML源代碼：

         內(nèi)容左 內(nèi)容右   boxb盒子里的內(nèi)容  

案例截圖

使用clear樣式清除浮動

相關CSS教程文章：
css clear清除浮動

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

CSS DIV實例代碼如下：

         內(nèi)容左 內(nèi)容右  boxb盒子里的內(nèi)容  

DIV+CSS案例效果截圖

二、相鄰兩個DIV重疊覆蓋    

這種新手出現(xiàn)這種問題比較多，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動，這樣照成兩個DIV覆蓋重疊現(xiàn)象。

1、出問題完整CSS+DIV代碼

        我是aa里內(nèi)容 我是BB里內(nèi)容  

介紹代碼：設置兩個盒子使用class命名分別為“.aa”和“.bb”，一個設置float:left一個設置沒有設置，一個設置背景為白色,一個設置背景顏色為灰色，一個高度設置50px，一個設置高度為80px，一個邊框為黑色，一個邊框為紅色。

2、案例效果截圖

DIV與DIV覆蓋案例截圖

3、問題分析
從上圖或瀏覽器測試案例可以看出，“.aa”對應DIV盒子浮動覆蓋在“.bb”對應DIV盒子之上，但內(nèi)容沒有覆蓋，這是因為“.aa”對應DIV盒子使用了浮動，而同級“.bb”對應DIV盒子沒有使用浮動，一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內(nèi)容不會照成覆蓋現(xiàn)象，只有DIV形成覆蓋現(xiàn)象。

4、解決方法
要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。

比如這里“.aa”對應盒子會固定寬度為300px;這個使用對“.bb”對應盒子設置margin-left:302px（大于300即可，自己測試設置需要的值）實現(xiàn)不重疊覆蓋現(xiàn)象。

關于“DIV相互重疊怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

<tfoot id="oekgc"></tfoot>