子Div浮在父div上，沒法撐開浮div

時間 2019-12-06

標籤 div 浮在沒法撐開欄目 CSS 简体版

原文原文鏈接

解決子級用css float浮動而父級div沒高度不能自適應高度

解決子級對象使用css float浮動而父級div不能自適應高度，不能被父級內容撐開解決方法，父級div沒有高度解決方法。css

最外層的父級DIV不能自適應高度-不能隨對象撐開沒有高度html

當在對象內的盒子使用了float後，致使對象自己不能被撐開自適應高度，這個是因爲浮動產生緣由。spa

如何解決父div對象自適應高度，方法有三種，接下來DIVCSS5逐一介紹。htm

一、首先咱們先看HTML源代碼：對象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父div不自適應高度實例</title>
<style>
.divcss5{ width:500px; border:1px solid #000; padding:10px}
.divcss5-lf{ float:left; width:220px; height:100px; background:#000}
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5-lf"></div>
<div class="divcss5-rt"></div>
</div>
</body>
</html>

二、問題效果截圖：blog

子對象使用float後，父div不能自適應高度實例截圖utf-8

方法一：對父級設置固定高度 - TOP

此方法可用於能肯定父級div內子級對象高度。get

假如以上案例，咱們知道內部div高度100px,那對父級設置css height爲100px看看效果。it

一、完整div+css實例html代碼（對父div加高度）：class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父div不自適應高度實例</title>
<style>
.divcss5{width:500px;border:1px solid #000;padding:10px; height:100px}
.divcss5-lf{ float:left; width:220px; height:100px; background:#000}
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5-lf"></div>
<div class="divcss5-rt"></div>
</div>
</body>
</html>

二、加高度解決不能撐開子對象使用float效果截圖

對父加高度100px 解決外層父div自適應高度截圖

此方法缺點，父級是固定高度，而不隨內容高度自適應高度，沒高度。此方法針對能肯定父div內的內容高度狀況下使用。

方法二：使用css clear清除浮動 - TOP

對父級div標籤閉合</div>前加一個clear清除浮動對象。

一、加clear效果完整div css代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父div不自適應高度實例</title>
<style>
.divcss5{width:500px;border:1px solid #000;padding:10px}
.divcss5-lf{ float:left; width:220px; height:100px; background:#000}
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
.clear{ clear:both}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5-lf"></div>
<div class="divcss5-rt"></div>
<div class="clear"></div>
</div>
</body>
</html>

二、加css clear解決父div不能自適應高度

使用clear:both清除父級內子對象產生浮動

此方法須要注意是clear:both加的位置，不是對父級直接加clear樣式，而是在父級</div>前加帶clear對象盒子。

方法三：對父級樣式加overflow樣式 - TOP

此方法很是簡單，也能夠做爲推薦解決父級不能被撐開自適應高度的方法，能夠不增長div盒子對象，只須要對父級加一個overflow:hidden樣式便可。

一、完整css div代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父div不自適應高度實例</title>
<style>
.divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden }
.divcss5-lf{ float:left; width:220px; height:100px; background:#000}
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5-lf"></div>
<div class="divcss5-rt"></div>
</div>
</body>
</html>

二、加css overflow方法截圖

父div加overflow樣式解決父自適應高度

推薦。此方法爲很是簡單解決子用float，父div不能自適應高度，不能隨父內容多少而自適應高度沒有高度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

子Div浮在父div上，沒法撐開浮div

解決子級用css float浮動 而父級div沒高度不能自適應高度

方法一：對父級設置固定高度 - TOP

方法二：使用css clear清除浮動 - TOP

方法三：對父級樣式加overflow樣式 - TOP

解決子級用css float浮動而父級div沒高度不能自適應高度