1.什么是高度塌陷?是怎么产生的?
高度塌陷:在浮动布局中,我们不指定父元素的宽高而是让子元素去撑起他,从而使父元素的宽高达到自适应的效果。但如果子元素设置了浮动,就会脱离文档流,那么父元素的高度也就为0,这就是高度塌陷。
<style>
.outer{
border: 10px solid red;
}
.inner{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
效果如下:
2.解决高度塌陷
1.给父元素设置宽高
高度塌陷出现的原因就是父元素要达到自适应的效果,所以不设置宽高。我们给父元素设置了固定宽高,也就不会出现高度塌陷的问题,同时也达不到自适应的效果了。
<style>
.outer{
border: 10px solid red;
}
.inner{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
但是这样会存在问题:我们不确定子元素的宽高,可能会出现空白或者溢出的现象。
2.overflow
使用overflow
属性,将overflow属性设置为不为visible,就可以。
原理:开启了bfc属性 可以看这篇文章---->详解bfa
<style>
.outer{
border: 10px solid red;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
<div class="outer">
<div class="box1"></div>
</div>
3.clear
使用clear清除浮动带来的影响,可以看这篇文章---->clear属性
原理:
<style>
.outer{
border: 10px solid red;
}
.outer::after{
content: "";
display: block;
clear: both;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
<div class="outer">
<div class="box1"></div>
</div>
4.clearfix
clearfix原理和clear类似,但同时也可以解决外边距重叠的问题
/*给父元素添加clearfix类*/
.clearfix::before,.clearfix::after{
content: "";
display: table;
clear: both;
}