BFC规则以及如何触发

BFC是什么？
浮动元素和绝对定位元素在一个块级格式上下文里，形成一个独立的渲染区域，BFC也可以看作是一种规则，触发了BFC规则的元素，就像是一个独立的容器，容器里面的子元素不会在布局上影响外面的元素，如同被隔离

BFC规则：
1、内部的盒子会在垂直方向上一个接一个放置
2、盒子垂直方向的距离是由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
3、BFC的区域不会与浮动的盒子重叠
4、计算BFC的高度时，浮动元素也会参与计算

BFC作用（触发BFC有什么好处）：
1、解决子元素浮动导致的父元素高度塌陷问题
通常情况下，父元素的高度会被子元素撑开，但是子元素浮动以后，父元素会发生高度塌陷，上下边界重合成一条线

<title>子元素浮动导致父元素高度为0</title>
    <style>
    .father {
   
        /* 父元素不设置高度 */
        width: 300px;
        background-color: red;
        /* overflow: hidden; */
    }
    .son1 {
   
        width: 100px;
        height: 50px;
        background-color: gray;
        float: left;
    }
    .son2 {
   
        width: 80px;
        height: 90px;
        background-