高度塌陷以及解决方法

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;
}