在網頁布局中我們經常會遇到高度塌陷的這樣的問題，那么什么是高度塌陷呢？
什么是高度塌陷?
父元素高度自適應，子元素float之后，造成父元素高度為0，稱為高度塌陷。他的產生條件就是子元素浮動
如何解決高度塌陷呢？
這里作者總結了8中解決方法和每種方法的優缺點
方案一
給父元素添加固定高度，適合做高度固定的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
/* 添加固定高度 */
height: 400px;
border: 5px solid red;
}
.son {
width: 200px;
height: 200px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
優點：簡單、代碼少、容易掌握
缺點：只適合做高度固定的布局，要給出精確的高度，如果和父級div不一樣時，會產生新的問題
建議：不推薦使用，只建議高度固定的布局使用
方案二
給父元素添加overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
/* 使用overflow:hidden可以讓父元素的盒子自動撐開
注意為了解決IE兼容問題我們需要添加zoom:1屬性
*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
優點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸會被隱藏
建議：在頁面布局中如果經常使用到定位不建議使用這個方法解決高度塌陷問題
方案三
給父元素結尾添加div標簽clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
}
.son{
width: 400px;
height: 400px;
background-color: yellow;
float:left;
}
span{
clear: both;
/* 下面兩行代碼是解決IE兼容問題，因為在IE兼容部分塊元素會自帶16px的高度 */
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
<div></div>
</div>
</body>
</html>
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理，需要增加多余的空標簽，讓人感覺不好
建議：不推薦使用，但是此方法是以前主要是用的一種清除浮動的方法
方案四
萬能清除法(更適合整站開發)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
}
.son {
width: 400px;height: 400px;
background: yellow;
float: left;
}
.parent::after{
content: "";
display: block;
clear: both;
/* height:0;和overflow:hidden;是為了解決IE兼容的問題 */
height: 0;
overflow: hidden;
/* visibility:hidden;是為了去除content中的文字 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
優點：瀏覽器支持好、不容易出現怪問題
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少CSS代碼
方案五
父級定義overflow:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
/* 此方法與overflow:auto的原理是一樣不過auto是內容超出后出現滾動條 */
overflow: auto;
}
.son {
width: 400px;
height: 400px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">使用父級元素dingyioverflow:auto方法</div>
</div>
</body>
</html>
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬度超過父元素容器之后，會出現滾動條
建議：由於會出現滾動條的原因不推薦大家使用
方案六
父級容器一起浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
float: left;
}
.son {
width: 400px;
height: 400px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
優點：沒有優點
缺點：會產生新的浮動問題
建議：不推薦使用，出現各種各種問題，了解就好
方案七
父級容器定義display:table;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
/* 改變元素類型 inline-block/flex/inlin-flex/table/table-cell/table-caption都可以 */
display: table;
}
.son{
width: 400px;
height: 400px;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">父級元素類型定義為table</div>
</div>
</body>
</html>
方案八
給父元素結尾添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
border: 5px solid red;
}
.son {
width: 400px;
height: 400px;
float: left;
background: yellow;
}
/* 給br標簽清除浮動 */
br{
clear: both;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">給父元素結尾添加br標前然后clear:both;</div>
<br>
</div>
</body>
</html>
優點：代碼少，瀏覽器支持好
缺點：造成多余代碼，而且br標簽在頁面本來就是會換行的作用不符合語義化規范
建議：不推薦使用，只做了解
逆戰班_許富熒