BFC的触发条件和解决的问题

首先，这里只是简明扼要的总结...

触发条件

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>

父元素触发BFC后

没想到写起来这么费劲，下次接着写