HTML里DIV相互重疊怎么辦
發(fā)表時(shí)間：2024-05-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]我們常常在做網(wǎng)頁的時(shí)候發(fā)現(xiàn)一個(gè)問題，那就是DIV覆蓋了DIV，這樣就出現(xiàn)了DIV的盒子重疊覆蓋導(dǎo)致內(nèi)容沒有出現(xiàn)這么一個(gè)問題，那么我們今天就來給大家介紹一下產(chǎn)生原因以及解決方法。可能您遇到過上下結(jié)構(gòu)的布局，下面DIV內(nèi)容重疊上面DIV內(nèi)容上，也可能下面內(nèi)容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋...
我們常常在做網(wǎng)頁的時(shí)候發(fā)現(xiàn)一個(gè)問題，那就是DIV覆蓋了DIV，這樣就出現(xiàn)了DIV的盒子重疊覆蓋導(dǎo)致內(nèi)容沒有出現(xiàn)這么一個(gè)問題，那么我們今天就來給大家介紹一下產(chǎn)生原因以及解決方法。
可能您遇到過上下結(jié)構(gòu)的布局，下面DIV內(nèi)容重疊上面DIV內(nèi)容上，也可能下面內(nèi)容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現(xiàn)象；您也可能遇到過相鄰的兩個(gè)DIV盒子發(fā)生重疊覆蓋現(xiàn)象，這些是什么問題如何解決？
接下來通過案例來演示這兩種兼容性DIV覆蓋重疊現(xiàn)象問題，并解釋原因與解決方法。
上下結(jié)構(gòu)DIV盒子覆蓋 首先實(shí)例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 class="boxa">
<div class="boxa-l">內(nèi)容左</div>
<div class="boxa-r">內(nèi)容右</div>
</div>
<div class="boxb">boxb盒子里的內(nèi)容</div>
</body>
</html>可拷貝代碼自己動(dòng)手發(fā)現(xiàn)DIV覆蓋現(xiàn)象。
實(shí)例代碼說明：
設(shè)置兩個(gè)大div盒子分別CSS命名為“.boxa”和“.boxb”，設(shè)置寬度相同均為400px,對(duì)“.boxb”設(shè)置一個(gè)黑色邊框與高為40px、背景為黑色的；然后在boxa里添加兩個(gè)一個(gè)靠左一個(gè)靠右CSS命名分別為“.boxa-l”“.boxa-r”，兩個(gè)小盒子，同時(shí)設(shè)置紅色邊框、css高為80px、寬度分別為280px和100px。
問題分析
一般想需要將“.boxa”和“.boxb”布局是上下結(jié)構(gòu)，從上圖發(fā)現(xiàn)在瀏覽器中看到效果是兩個(gè)盒子里內(nèi)容是實(shí)現(xiàn)上下結(jié)構(gòu)效果，但“.boxb”這個(gè)DIV跑到“.boxa”下面去了，但內(nèi)容沒有發(fā)生覆蓋，只有DIV發(fā)生覆蓋現(xiàn)象。
這個(gè)原因是因?yàn)榈谝粋�(gè)大盒子里的子級(jí)使用了浮動(dòng)float屬性而產(chǎn)生了浮動(dòng)，所以導(dǎo)致“.boxa”沒有被撐開，而同級(jí)的“.boxb”盒子與“.boxa”緊貼，而“.boxa”高度沒有，“.boxa”的子級(jí)浮動(dòng)的與“.boxb”不是同級(jí)，“.boxb”盒子依然認(rèn)為“.boxa”沒有高度，所以導(dǎo)致“.boxb”DIV盒子就跑到“.boxa”子級(jí)DIV盒子下面形成了覆蓋重疊現(xiàn)象。
問題解決方法
要么清除浮動(dòng)，要么設(shè)置“.boxa”高度，一般情況下文字內(nèi)容不確定多少 就不能設(shè)置固定的高度，所以一般不能設(shè)置“.boxa”高度(當(dāng)然能確定內(nèi)容多高，這種情況下“.boxa”是可以設(shè)置一個(gè)高度即可解決覆蓋問題。)。
這里就使用CSS清除浮動(dòng)方法解決上下結(jié)構(gòu)DIV重疊覆蓋問題，清除浮動(dòng)有兩種方法，方法如下。
css clear清除浮動(dòng)
在“.boxa”盒子</div>閉合前加clear樣式清除浮動(dòng)。
完整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 class="boxa">
<div class="boxa-l">內(nèi)容左</div>
<div class="boxa-r">內(nèi)容右</div>
<div class="clear"></div>
</div>
<div class="boxb">boxb盒子里的內(nèi)容</div>
</body>
</html>此方法與上一方法更為簡便簡單，只需對(duì)“.boxa”（子級(jí)有浮動(dòng)的父級(jí)盒子加overflow:hidden）
CSS DIV實(shí)例代碼如下：
<!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 class="boxa">
<div class="boxa-l">內(nèi)容左</div>
<div class="boxa-r">內(nèi)容右</div>
</div>
<div class="boxb">boxb盒子里的內(nèi)容</div>
</body>
</html>解決DIV覆蓋的問題就這樣給大家解決了。更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
CSS里怎么使用border-radius
HTML的表格樣式
html的編輯轉(zhuǎn)換器
以上就是HTML里DIV相互重疊怎么辦的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
