明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML里DIV相互重疊怎么辦

發(fā)表時間：2024-05-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]我們常常在做網(wǎng)頁的時候發(fā)現(xiàn)一個問題，那就是DIV覆蓋了DIV，這樣就出現(xiàn)了DIV的盒子重疊覆蓋導(dǎo)致內(nèi)容沒有出現(xiàn)這么一個問題，那么我們今天就來給大家介紹一下產(chǎn)生原因以及解決方法�？赡苣龅竭^上下結(jié)構(gòu)的布局，下面DIV內(nèi)容重疊上面DIV內(nèi)容上，也可能下面內(nèi)容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋...
我們常常在做網(wǎng)頁的時候發(fā)現(xiàn)一個問題，那就是DIV覆蓋了DIV，這樣就出現(xiàn)了DIV的盒子重疊覆蓋導(dǎo)致內(nèi)容沒有出現(xiàn)這么一個問題，那么我們今天就來給大家介紹一下產(chǎn)生原因以及解決方法。

可能您遇到過上下結(jié)構(gòu)的布局，下面DIV內(nèi)容重疊上面DIV內(nèi)容上，也可能下面內(nèi)容覆蓋掉上面DIV布局，形成DIV與DIV覆蓋重疊現(xiàn)象；您也可能遇到過相鄰的兩個DIV盒子發(fā)生重疊覆蓋現(xiàn)象，這些是什么問題如何解決？

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

上下結(jié)構(gòu)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 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>

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

實例代碼說明：

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

問題分析

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

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

問題解決方法

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

這里就使用CSS清除浮動方法解決上下結(jié)構(gòu)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 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>

此方法與上一方法更為簡便簡單，只需對“.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 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覆蓋的問題就這樣給大家解決了。更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

CSS里怎么使用border-radius

HTML的表格樣式

html的編輯轉(zhuǎn)換器

以上就是HTML里DIV相互重疊怎么辦的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。