怎么解决div覆盖内容却没覆盖的问题?_html/css_WEB-ITnose
一、在上下结构的div布局中，可能出现div覆盖div，但是内容却没有出现覆盖的现象。看看一个示例
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .boxa,.boxb{ margin:0 auto; width:400px;} 8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 10: .boxb{ border:1px solid #000; height:40px; background:#999}11: </style>
12: </head>
13: <body>
14: <div class="boxa">
15: <div class="boxa-l">内容左</div>
16: <div class="boxa-r">内容右</div>
17: </div>
18: <div class="boxb">boxb盒子里的内容</div>
19: </body>
20: </html>
一般想需要将“.boxa”和“.boxb”布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但“.boxb”这个DIV跑到“.boxa”下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。
这 个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动，所以导致“.boxa”没有被撑开，而同级的“.boxb”盒子与 “.boxa”紧贴，而“.boxa”高度没有，“.boxa”的子级浮动的与“.boxb”不是同级，“.boxb”盒子依然认为“.boxa”没有高 度，所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。
问题解决办法，测试有三种：
1、给boxa添加一个height属性，height的值必须大于或等于baxa-l的高度
1: <div class="boxa" style="height:81px;">
2、清除浮动
在“.boxa”盒子
1: //css
2: .clear{ clear:both}3:
4: //修改boxa
5: <div class="boxa">
6: <div class="boxa-l">内容左</div>
7: <div class="boxa-r">内容右</div>
8: <div class="clear"></div>
9: </div>
或者在boxb上清除浮动
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
3、对“.boxa”添加overflow:hidden
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </div>
二、相邻两个DIV重叠覆盖
这种问题一般是由于相邻两个DIV一个使用浮动一个没有使用浮动，这样照成两个DIV覆盖重叠现象。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;} 8: .cc{ border:1px solid #F00;background:#CCC; height:80px}9: </style>
10: </head>
11: <body>
12: <div class="bb">我是bb里内容</div>
13: <div class="cc">我是dd里内容</div>
14: </body>
15: </html>
从 上图或浏览器测试案例可以看出，“.bb”对应DIV盒子浮动覆盖在“.cc”对应DIV盒子之上，但内容没有覆盖，这是因为“.bb”对应DIV盒子使 用了浮动，而同级“.cc”对应DIV盒子没有使用浮动，一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成 覆盖现象。
解决方法：
1、都不使用浮动，去掉.bb中的float，效果如下
2、都使用浮动，给.cc添加float:left,效果如下
3、对没有使用float浮动的DIV设置margin样式。给.cc添加margin:100px,效果如下
来源：http://www.ido321.com/669.html
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11系統無法安裝中文語言套件的解決方法
Mar 09, 2024 am 09:48 AM
Win11系統無法安裝中文語言包的解決方法隨著Windows11系統的推出，許多用戶開始升級他們的作業系統以體驗新的功能和介面。然而，一些用戶在升級後發現他們無法安裝中文語言包，這給他們的使用體驗帶來了困擾。在本文中，我們將探討Win11系統無法安裝中文語言套件的原因，並提供一些解決方法，幫助使用者解決這個問題。原因分析首先，讓我們來分析一下Win11系統無法
五招教你解決黑鯊手機開不了機的問題！
Mar 24, 2024 pm 12:27 PM
隨著智慧型手機技術的不斷發展，手機在我們日常生活中扮演著越來越重要的角色。而作為一款專注於遊戲效能的旗艦手機，黑鯊手機備受玩家青睞。然而，有時候我們也會面臨到黑鯊手機開不了機的情況，這時候我們就需要採取一些措施來解決這個問題。接下來，就讓我們來分享五招教你解決黑鯊手機開不了機的問題：第一招：檢查電池電量首先，確保你的黑鯊手機有足夠的電量。可能是因為手機電量耗盡
小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？
Mar 22, 2024 am 08:06 AM
隨著社群媒體的不斷發展，小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題，這讓他們感到十分困擾。那麼，如何解決這個問題呢？一、小紅書發布自動儲存圖片怎麼解決？ 1.清除快取首先，我們可以嘗試清除小紅書的快取資料。步驟如下：（1）開啟小紅書，點選右下角的「我的」按鈕；（2）在個人中心頁面，找到「設定」並點選；（3）向下捲動，找到「清除快取」選項，點擊確認。清除快取後，重新進入小紅書，嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小
無法在此裝置上載入驅動程式怎麼解決？ (親測有效)
Mar 14, 2024 pm 09:00 PM
大家都知道，如果電腦無法載入驅動程序，該設備可能就無法正常工作或與電腦進行正確的互動。那在電腦上彈出無法在此裝置上載入驅動程式的提示框，我們要如何解決呢？下面小編就教大家兩招輕鬆解決問題。 無法在此裝置上載入驅動程式解決方法 1、開始功能表搜尋「核心隔離」。 2、將記憶體完整性關閉，上方提示「記憶體完整性已關閉。你的裝置可能易受攻擊。」點擊後方忽略即可，不會對使用有影響。 3.重啟機器之後即可解決問題。
如何解決預設網關自動消失的問題
Feb 24, 2024 pm 04:18 PM
預設網關自動消失怎麼解決在現代社會中，網路已經成為人們生活中不可或缺的一部分。無論是工作還是娛樂，我們都需要穩定的網路連線來完成各種任務。而預設閘道是連接本地網路與外部網際網路的關鍵要素之一。然而，有時我們可能會遇到預設閘道自動消失的問題，導致無法上網。那麼，當預設網關消失時，我們該如何解決這個問題？首先，我們應該明確預設網關的概念。預設網關是一個網路路
華為瀏覽器已停止造訪該網頁怎麼解決
Feb 26, 2024 pm 01:28 PM
華為瀏覽器已停止造訪該網頁怎麼解決？使用華為手機瀏覽器造訪某些網站時，可能會出現禁止造訪的提示，使用戶無法正常瀏覽相關內容。這對用戶而言非常不便。那麼，當我們遇到華為手機瀏覽器網站禁止造訪的情況時，該怎麼辦呢？以下小編將為您提供華為瀏覽器網站禁止存取解決方法，希望對您有所幫助。華為瀏覽器網站禁止訪問解決方法1、打開華為手機瀏覽器後，點擊下方的三點圖標，然後點擊設定。 2.進入設定後，點選【安全與隱私】3、將【安全瀏覽】右側的開關關閉，即可解除網站存取限制。以上便是華為瀏覽器網站禁止存取解決方法的
解讀Oracle錯誤3114：原因及解決方法
Mar 08, 2024 pm 03:42 PM
標題：分析Oracle錯誤3114：原因及解決方法在使用Oracle資料庫時，常常會遇到各種錯誤代碼，其中錯誤3114是比較常見的一個。此錯誤一般涉及資料庫連結的問題，可能導致存取資料庫時出現異常狀況。本文將對Oracle錯誤3114進行解讀，探討其造成的原因，並給出解決該錯誤的具體方法以及相關的程式碼範例。 1.錯誤3114的定義Oracle錯誤3114通
Microsoft Edge瀏覽器開啟是360導航怎麼改-更改開啟是360導航的方法
Mar 04, 2024 pm 01:50 PM
怎麼更改MicrosoftEdge瀏覽器打開是360導航的頁面呢?其實很簡單，那麼現在小編就和大家一起分享關於更改MicrosoftEdge瀏覽器打開是360導航頁面的方法，有需要的朋友可以來看看哦，希望可以幫助大家。開啟MicrosoftEdge瀏覽器。我們看到是下圖這種頁面。點擊右上角的三點圖示。點選“設定”。在設定頁面的左側欄裡點選「啟動時」。點選右側欄裡的圖中示意的三點(不要能點選「開啟新標籤頁」)，然後點選編輯，將網址改成「0」(或其他無意義的數字)。然後點選「儲存」。接下來，選擇“
