目录
一、出现高度塌陷原因
一般情况下父元素的高度不是固定的,默认是被子元素撑开的,出现高度塌陷即是设置元素脱离文档流,那就无法撑开父元素的高度,导致父元素的高度丢失,使得页面布局发生混乱。
二、高度塌陷解决方法
解决方案一
将父元素高度固定住(此方法后面不方便调节,不推荐使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.outer {
border: 10px red solid;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3 {
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box3"></div>
</body>
</html>
解决方案二
开启页面元素中的隐含属性:Block Formatting Context 即块格式化上下文,简称BFC。当开启元素的BFC以后,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素。
开启BFC后的元素可以包含浮动的子元素即可解决高度塌陷。
开启BFC属性又有几种不同的方法
1.设置元素浮动(不推荐)
使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
2.设置元素为inline-block(不推荐)
可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
3.将元素的overflow设置为一个非visible的值
4.设置元素绝对定位
元素也会脱离文档流,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
推荐:使用overflow:hidden开启BFC属性是副作用最小的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.outer {
border: 10px red solid;
float: left;
/* display: inline-block; */
/* overflow: hidden; */
/* position: absolute; */
}
.inner {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3 {
height: 100px;
width: 150px;
background-color: yellow;
float: left;
}
.box {
width: 400px;
height: 400px;
background-color: aquamarine;
/* overflow: hidden; */
/* float: left; */
/* display: inline-block; */
/* position: absolute; */
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box3"></div>
<!-- <div class="box">
<div class="box1"></div>
</div> -->
</body>
</html>
解决方案三
可以直接在高度塌陷的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度。(但是这种方式会在页面中添加多余的结构)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
border: 10px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
<div class="box3"></div>
</div>
</body>
</html>
解决方案四
通过after伪类,选中box1的后边的一个空白块元素,然后对其消除浮动,这样不会在页面中添加多余元素,这是最好的解决方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
border: 10px solid red;
}
.qq::after{
content: '';
display: block;
clear: both;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1 qq">
<div class="box2"></div>
</div>
<div class="box3 qq"></div>
</body>
</html>