先说结论，一共有 1 + 4 中解决方案
前置条件
- 父元素的高度，是由非浮动的子元素的高度撑起
- 子元素浮动，父元素高度会坍塌
<div class="father">
<div class="son1">浮动元素</div>
<div class="son2">非浮动</div>
</div>
<style>
.son1{
float: left; /** 浮动样式 */
}
</style>
方法一：给父元素固定高度（不推荐）
缺点：往往在项目中很难提前固定好父元素的高度。这里强烈不推荐
方法二：父元素设置overflow:hidden
.father { overflow: hidden }
原理：把父元素设置成BFC
上面这样设置以后，父元素必须包裹住所有的内部元素（浮动、块元素），以及所有的margin范围
缺点：有的时候，我们希望部分子元素在父元素之外可以看到（如菜单的子菜单通过position，可以展示出来），就出现了矛盾点
方法三：父元素设置浮动（float）
.father { float: left }
原理： 浮动属性也会强制父元素扩大到包含所有浮动的内部元素（BFC）
缺点：会引入新的浮动问题
此时处理方法：父元素之后的平级元素清除浮动（clear:both）
方法四：父元素内结尾追加空子元素
<div class="father">
<div class="son1">浮动元素</div>
<div class="son2">非浮动</div>
<div class="empty"></div>
</div>
.empty {
clear: both;
}
在父元素内结尾追加空的子元素（块级元素）并设置空子元素clear：both
原理：利用clear：both 和 父元素必须包含非浮动元素
缺点：无端多出一个无意义的看不见的空元素，影响选择器和查找元素
方法五：父元素末尾伪元素（推荐）
父元素::after {
content: "";
display: table;
clear: both;
height: 0; // 个别浏览器display:table，可能带默认高度
}
优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题
总结
总的来说，通过两种方式：1.BFC；2.clear的属性来防止高度坍塌
