我们常常在做网页的时候发现一个问题，那就是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中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci HTML里DIV相互重叠怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah tag root dalam dokumen HTML?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itservesasthetop-levelementthatencapsulatesallotherContent, memastikanproperdocumentstructureandbrowserparsing.
Adakah tag dan elemen HTML perkara yang sama?Apr 28, 2025 pm 05:44 PMArtikel ini menerangkan bahawa tag HTML adalah penanda sintaks yang digunakan untuk menentukan unsur -unsur, manakala unsur -unsur adalah unit lengkap termasuk tag dan kandungan. Mereka bekerjasama untuk menyusun laman web.Character Count: 159
Apakah kepentingan & lt; kepala & gt; dan & lt; body & gt; Tag dalam html?Apr 28, 2025 pm 05:43 PMArtikel ini membincangkan peranan & lt; kepala & gt; dan & lt; body & gt; Tag dalam HTML, kesannya terhadap pengalaman pengguna, dan implikasi SEO. Penstrukturan yang betul meningkatkan fungsi laman web dan pengoptimuman enjin carian.
Apakah perbezaan antara & lt; strong & gt;, & lt; b & gt; tags dan & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PMArtikel ini membincangkan perbezaan antara tag HTML ,, dan, memberi tumpuan kepada kegunaan semantik dan presentasi mereka dan kesannya terhadap SEO dan kebolehaksesan.
Sila jelaskan bagaimana untuk menunjukkan set aksara yang digunakan oleh dokumen dalam HTML?Apr 28, 2025 pm 05:41 PMArtikel membincangkan menentukan pengekodan aksara dalam HTML, memberi tumpuan kepada UTF-8. Isu Utama: Memastikan paparan teks yang betul, menghalang watak -watak yang dihiasi, dan meningkatkan SEO dan kebolehcapaian.
Apakah pelbagai tag pemformatan dalam html?Apr 28, 2025 pm 05:39 PMArtikel ini membincangkan pelbagai tag pemformatan HTML yang digunakan untuk penstrukturan dan gaya web kandungan, menekankan kesannya pada penampilan teks dan kepentingan tag semantik untuk akses dan SEO.
Apakah perbezaan antara atribut 'ID' dan atribut 'kelas' elemen HTML?Apr 28, 2025 pm 05:39 PMArtikel ini membincangkan perbezaan antara atribut 'ID' dan 'kelas' HTML, yang memberi tumpuan kepada keunikan, tujuan, sintaks CSS, dan kekhususan mereka. Ia menerangkan bagaimana penggunaan penggunaannya mempengaruhi gaya dan fungsi laman web, dan menyediakan amalan terbaik untuk
Apakah atribut 'kelas' dalam HTML?Apr 28, 2025 pm 05:37 PMArtikel ini menerangkan peranan atribut kelas HTML 'dalam kumpulan penggabungan untuk gaya dan manipulasi JavaScript, membezakannya dengan atribut' ID 'yang unik.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
