高在开发的过程中，我们往往会使父级的高度自适应（没有固定高度，高度由子级撑开），但是有时需要子级浮动（float）,这时的子级会脱离文档流，子级不会再把父级的高度撑开了。这就是高度坍塌形成的原因。
结果如下：
解决方法：
1.方法：在父级上添加高度
优点：好理解
缺点：固定的布局，不能做到自适应
2.给父级添加 overflow:hidden
原理：触发了 BFC
（块级格式化上下文）-- 将浮动元素的高度参与计算
优点：简单，代码少
缺点：子元素含有定位属性，那么子级元素超出的部分会被隐藏
3.在最后一个浮动元素同级添加一个div，给div添加css声明
div{ clear:both;} clear:left / right / both
原理：表示清除上方预留出来的空间
优点：清除方便
缺点：代码多，HTML结构，代码冗余，造成排版影响
4.万能清除法
原理：表示清除上方预留出来的空间
方法:a.给含有高度塌陷的父级盒子添加类名clear-fix
.clear-fix:after{
content:" ";
clear:both;
height:0;
width:100%;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear-fix{zoom:1;/*兼容IE*/}
作者：踢爆地球
链接：https://www.jianshu.com/p/abc2499c646e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
