整理自撩课学院（www.itlike.com）的视频
一、产生原因
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
二、后果
父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱
三、解决办法
方案一：开启父元素的BFC
1、BFC是什么？
1.1 Block Formatting Context——块级格式化环境
1.2 BFC是元素的隐含属性，默认是在关闭状态的。可以通过一些特殊的样式，来开启BFC
2、开启BFC以后元素将会具有如下特性：
2.1 父元素的垂直外边距不会与子元素重叠
2.2. 开启BFC的元素不会被浮动元素所覆盖
2.3 开启BFC的元素可以包含浮动子元素
3、开启BFC的方式：
3.1 设置元素浮动
3.2 设置元素绝对定位
3.3 设置元素的类型为inline-block
3.4 设置overflow为一个非默认值，一般都是使用overflow:hidden来开启BFC ！最推荐！
方案二：添加元素
1、具体方式？
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
<div id="box1">
<div id="box2"></div>
<div style="clear:both"></div>
</div>
2、存在问题？
使用这种方式会在页面中添加多余的结构
3、什么是清除浮动？
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
1、none，默认值，不清除浮动
2、left，清除左侧浮动元素对当前元素的影响
3、right，清除右侧浮动元素对当前元素的影响
4、both，清除两侧浮动元素对当前元素的影响
方案三：使用after伪类（最推荐）
使用after伪类，向父元素后添加一个块元素，并对其清除浮动。该种方式的原理和方法二原理一样，但是不用向页面中添加多于的结构。
.clearfix:after{
content:"";
display:block;
clear:both;
}
完善高度塌陷
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，可以在子元素前加上<table>标签
<div>
<table><table>
<div>子元素<div>
</div>
将它与clearfix:after结合，如下
.clearfix::before,
.learfix::after {
content:'';
display:table;
clear:both;
}
