BFC规范的理解

视频：click
【理解】：块格式化上下文（block formatting context），一个新的BFC盒子是独立布局，盒子内子元素样式不会影响到外面的元素，
【BFC的布局规则】
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于 同一个 BFC的两个相邻Box的margin会发生重叠。
3、每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

【触发BFC】：
浮动元素 float ＝ left | right 或 inherit（≠ none）
绝对定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
【BFC能解决问题】：
1、解决元素外边距折叠问题。将不想折叠的元素创建BFC，属性写overflow:hidden; 对应布局规则1

style type="text/css">
    .divall{
        margin:0;
        padding: 0;
    }
    p{
        margin: 20px;  
        width: 100px;
        height: 100px;          
    }
    .p1{
        background-color: yellow;
    }
    .p2{
       background-color: tomato;
    }
</style>
<div class="divall">
   <p class='p1'></p>
    <p class='p2'></p>
</div>

正常显示：margin间隙为20px

添加overflow:hidden;

<style type="text/css">
    .divall{
        margin:0;
        padding: 0;
    }
    p{
        margin: 20px;  
        width: 100px;
        height: 100px;          
    }
    /*形成新BFC块*/
    .aa{
        overflow: hidden;
    }
    
    .p1{
        background-color: yellow;
    }
    .p2{
       background-color: tomato;
    }
</style>
<div class="divall">
	<!--用overflow:hidden 属性触法BFC-->
    <div class="aa">
        <p class='p1'></p>
    </div>
    <p class='p2'></p>
</div>

2、解决浮动导致父高度塌陷问题。
父元素高度塌陷：

.divall{
   margin:0;
    padding: 0;
    background-color: blueviolet;
    border:1px solid red;
    /*overflow:hidden;                               !!此处消除塌陷*/
}
.div1{ 
    width: 100px;
    height: 100px; 
    background-color: yellow;
    float: left;                              /*导致塌陷*/
}
     
 <div class="divall">
    <div class='div1'></div>
</div>       

解决塌陷后：

3、 阻止元素被浮动元素覆盖。对应布局规则4

<style type="text/css">
    .div1{ 
        width: 100px;
        height: 100px; 
        background-color: yellow;
        float: left;
    }
    .div2{ 
        width: 106px;
        height: 106px; 
        background-color: rgb(235, 74, 25);
        /*overflow: hidden;*/     /*触发正常元素的BFC属性*/
        /*flot:left;*/     /*或者使用float*/
    }
</style>
<div class='div1'></div>
 <div class='div2'></div>

触法正常元素BFC属性