高度塌陷的产生条件和解决方法

高度塌陷的产生条件和解决方法

高度塌陷一般由浮动或者绝对或固定定位引起，定位引起的高度塌陷可以更换定位，这里就不再累述了，这里介绍下浮动引起的高度塌陷及解决办法。
浮动除了会让元素水平排列外，还会让元素脱离文档，让下面的元素顶上去，文字会环绕显示，这就是高度塌陷。

.box{border: 5px solid black;}
.box1,.box2,.box3{float: left;}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200227001001165.png
可以看到，如果父元素不设置高度父元素便会塌陷。下面介绍解决方法

方法一：给父元素设置高度；

.box{border: 5px solid black;height: 150px;}

问题解决。
优点：简单直接
缺点：高度不能随内容的高度进行自适应。

方法二：给父元素加overflow：hidden；zoom：1；

.box{border: 5px solid black;overflow: hidden;zoom: 1;}

overflow：hidden；会触发父元素为BFC；BFC中规定计算bfc高度时浮动元素参与计算；zoom：1是为了解决overflow：hidden在IE7及以下的兼容问题；
优点：简单且高度随内容自适用；
缺点：容易和定位发生冲突；

方法三：给所有浮动元素的最后添加一个空标签，添加声明clear：both；height：0；overflow：hidden；

<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="clear"></div>
</div>
<div class="under">我是下面的元素</div>

.clear{overflow: hidden;height: 0;clear: both;}

clear:both；目的是清除浮动；
overflow：hidden；height：0；是解决部分容器在IE低版本上有默认高度的问题；
优点：比较方便，高度也随内容自适应，也不会发生内容溢出隐藏
缺点：会造成大量冗余代码；

方法四：利用伪元素选择器解决高度塌陷；

.box::after{content: "";clear:both;display: block;height: 0;overflow:hidden;visibility: hidden;}

利用：after伪类选择器清除浮动时候，基本语法为
塌陷元素：after{content: “”;clear:both;display: block;}
声明 height: 0;overflow:hidden;为了避免IE兼容问题；
声明visibility: hidden;是隐藏content引号内的内容；
这种清除高度塌陷的方法又叫万能清楚法，通常页面开发的时候，会创建一个公共类，方便产生高度塌陷的元素进行调用；
优点：都是优点
缺点：没有缺点

其他不常用方法：

原理都是触发父元素为BFC，和方法二相同；
1.给父元素添加浮动：会产生新的高度塌陷问题；
2.给父元素添加display：table；会影响自身功能；
3.overflow：auto/scroll；前者内容溢出会出现滚动条，后者直接出现滚动栏；