div相互覆蓋,div與div盒子之間產生重疊覆蓋現象的解決辦法

    div覆蓋div,出現div與div盒子之間產生重疊覆蓋現象，而內容沒有出現覆蓋重疊現象緣由與解決方法。

    可能你遇到過上下結構的佈局，下面DIV內容重疊上面DIV內容上，也可能右面內容覆蓋掉左面的DIV佈局，造成DIV與DIV覆蓋重疊現象，這些是什麼問題如何解決？

    接下來博主將經過案例來演示這兩種兼容性DIV覆蓋重疊現象問題，並解釋緣由與解決方法。

   案例1、上下結構的DIV盒子覆蓋   

一、首先，建立一個實例網頁DIV CSS實例HTML代碼：

實例代碼說明：

    設置兩個最大的div盒子分別CSS命名爲「.boxa」和「.boxb」，兩個大盒子寬度相同均爲400px；
    對「.boxb」設置1px的黑色邊框，高爲40px，背景爲黑色；
    而後在「.boxa」裏添加兩個小盒子，一個浮動靠左，一個浮動靠右；
    兩個小盒子分別命名爲「.boxa-l」「.boxa-r」；
    對兩個小盒子，同時設置紅色邊框、css高爲80px、寬度分別爲280px和100px。

二、實例效果：

三、問題分析

目的效果：「.boxa」和「.boxb」佈局是上下結構，「.boxa-l」和「.boxa-r」分別位於「.boxa」的左右；

實際效果：在瀏覽器中看到效果是兩個盒子裏內容是實現上下結構效果，但「.boxb」這個DIV跑到「.boxa」下面去了；內容沒有發生覆蓋，只有DIV發生覆蓋現象。

緣由分析：

    (1).DIV發生覆蓋的緣由

        「.boxa」大盒子裏的子級盒子：「.boxa-l」和「.boxa-r」使用了浮動float屬性而產生了浮動，因此致使「.boxa」沒有被撐開；「.boxa」沒有高度，而同級的「.boxb」盒子與「.boxa」上下緊貼，因此致使「.boxb」DIV盒子就跑到「.boxa」子級DIV盒子下面造成了覆蓋重疊現象；

    (2).內容沒有發生覆蓋的緣由

        「.boxa」的子級盒子「.boxa-l」和「.boxa-r」裏面有內容，自動撐開本身的盒子，造成本身的高度，因此沒有發生重疊。

四、解決方案

兩種解決方案：

一、肯定內容多少的話->直接給「.boxa」設置高度便可；

二、不肯定內容多少的話->清除浮動；-------在「.boxa」盒子</div>閉合前加clear樣式清除浮動。

效果截圖：

·······································································································································

   2、左右相鄰兩個DIV重疊覆蓋   

一、首先，建立一個實例DIV CSS實例HTML代碼：

實例代碼說明：

    設置兩個盒子css命名分別爲「.aa」和「.bb」；
    aa設置float:left、背景爲白色、高度設置50px、邊框爲黑色；
    bb沒有設置浮動、背景顏色爲灰色、高度爲80px、邊框爲紅色；

二、實例效果：

三、問題分析

目的效果：aa和bb佈局是左右並列結構，aa在左，bb在右；

實際效果：在瀏覽器中看到效果是「.aa」對應DIV盒子浮動覆蓋在「.bb」對應DIV盒子之上，但內容沒有覆蓋；

緣由分析：「.aa」對應DIV盒子使用了浮動，而同級「.bb」對應DIV盒子沒有使用浮動；一個浮動，一個不浮動致使兩個DIV不是在同個「平面」上，但內容不會照成覆蓋現象，只有DIV造成覆蓋現象。

四、解決方案

        要麼都不使用浮動；

        要麼都使用float浮動；

        要麼對沒有使用float浮動的DIV設置margin樣式。

        好比這裏「.aa」對應盒子會固定寬度爲300px；對「.bb」對應盒子設置margin-left:302px（大於300便可，本身測試設置須要的值）便可實現不重疊覆蓋現象。