什么是高度塌陷?
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
但是当为子元素设置浮动以后,子元素会完全脱离文档流,
此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
例如:
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
*{
margin: 0;
padding: 0;
}/*设置全局样式让元素自带的margin、padding值清零*/
.box1{
width: 200px;
background: #f00;
border:10px solid #000;
}
.box2{
background: #0f0;
width: 100px;
height: 100px;
}
.box3{
background: #00f;
width: 100px;
height: 100px;
}
正常的效果如下:
此时是正常显示
若给box2加浮动则会使父元素box1高度塌陷,如下:
.box2{
background: #0f0;
width: 100px;
height: 100px;
float: left;
}
由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
那么该如何解决高度塌陷这个问题?
第一种方法:给父元素的高度加固定的值:
.box1{
width: 200px;
height: 100px;/*给父元素加一个高度*/
background: #f00;
border:10px solid #000;
}
此时就会回归正常显示
但是如果给父元素加上了高度,则无法使父元素随子元素的高改变,即无法让父元素实现高度自适应
第二种方法:给父元素加上overflow:hidden;使其适用于BFC规则:
BFC规则这边就不展开讲
.box1{
width: 200px;
background: #f00;
border:10px solid #000;
overflow: hidden;/*让父元素适用于BFC规则*/
}
第三种方法:给父元素最后面加上一个空的div:
由于这个div并没有浮动,所以他是可以撑开父元素的高度的, 然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度。
<div class="box1">
<div class="box2"></div>
<div class="box4"></div>
<div class="box3"></div>
</div>
.box4{
height: 0;
clear: both;/*清除浮动*/
}
这个方法基本没有副作用,使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
第四种方法:通过after伪类,实现等同于第三种方法的效果:
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动。
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
.box1:after{
content:"";/*内容显示为空*/
display:block;/*转换为一个块元素*/
clear:both;/*清除两侧的浮动*/
height:0;
overflow:hidden;/*超出隐藏*/
visibility:hidden;/*将其中内容隐藏*/
}
这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是最推荐使用的方式,几乎没有副作用。
以上仅为个人观点,若有错误,可私信本人指出,不喜勿喷,谢谢!