什么是高度塌陷？如何解决高度塌陷
1. 高度塌陷的产生原因
父元素在文档流中的高度默认是子元素撑开的，当子元素脱离文档流之后，将无法撑起父元素的高度，也就会造成父元素的高度塌陷。
2. 造成后果
父元素高度一旦塌陷，所有标准流中的元素的位置都将会上移，导致整个页面布局混乱。
3. 解决方案
-
给父元素设置一个默认的高度，但这种方式不太灵活，父元素的高度变为固定高度，当后期进行代码维护，增加或者修改文档内的内容时，需要重新进行设置父元素的高度，违背了高度自适应的原则。
-
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
clear：both / left / right
存在问题：会使文档中增加多余的结构，是文档内容结构更加复杂 -
使用after伪类，万能清除浮动方法，是清除浮动最好的解决方案
.box:after{ content:''; clear:both; display:block; ..... }
-
给父元素添加overflow:hidden;属性，这种方式被所有浏览器所支持，但是当给子元素设置定位或者浮动的时候，超出的部分会被裁剪下去。
-
开启父元素的BFC
BFC也是一个面试过程中经常有问到的问题，下面就来介绍一下，什么是BFC，它有什么作用呢？
BFC指块级格式化上下文(块级格式化环境)，用于清除浮动，防止margin的重叠
BFC是元素的隐含属性，默认情况下是关闭状态的
**开启BFC后，元素具有哪些特性？**
- 父元素的垂直外边距不会与子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动子元素
- 计算BFC高度的时候，浮动子元素也参与计算
- BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素
**开启BFC的方式**
- 设置元素浮动 float: left / right;
- 设置元素绝对定位/固定定位 position: absolute / fixed;
- 设置元素类型为inline-block
- 设置元素属性 overflow: hidden / auto / scroll
