首先，这里只是简明扼要的总结...
触发条件
1.float不为none
2.overflow不为visible
3.position为fixed，absolute
4.display为flex，inline-flex，inline-block，table-cell，tab-caption
解决问题
1.父子元素中，第一个子元素浮动造成的高度塌陷
<div class="father" style="border: 1px solid; width: 500px; min-height: 50px">
<div
class="child"
style="background-color: violet; width: 100px; height: 100px"
></div>
</div>
正常情况下子元素会撑起父元素的高度
<div class="father" style="border: 1px solid; width: 500px; min-height: 50px">
<div
class="child"
style="background-color: violet; width: 100px; height: 100px; float: left;"
></div>
</div>
给子元素加了浮动后子元素不能再撑起父元素高度，造成高度塌陷
父元素触发BFC后，这里我加的是overflow: auto
<div class="father" style="border: 1px solid; width: 500px; min-height: 50px;overflow: auto;">
<div
class="child"
style="background-color: violet; width: 100px; height: 100px; float: left;"
></div>
</div>
没想到写起来这么费劲，下次接着写
