首頁 > 文章 > web前端 > HTML裡DIV互相重疊怎麼辦

HTML裡DIV互相重疊怎麼辦

php中世界最好的语言原創: 2017-11-23 18:12:0921309瀏覽

我們常常在做網頁的時候發現一個問題，那就是DIV覆蓋了DIV，這樣就出現了DIV的盒子重疊覆蓋導致內容沒有出現這麼一個問題，那麼我們今天就來給大家介紹一下產生原因以及解決方法。

可能您遇到過上下結構的佈局，下面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 class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

可拷貝程式碼自己動手發現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」盒子16b28748ea4df4d9c2150843fecfba68閉合前加上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">内容左</div> 
<div class="boxa-r">内容右</div> 
<div class="clear"></div> 
</div> 
<div class="boxb">boxb盒子里的内容</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">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

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