CSS篇学习笔记4

          任务名：块格式化上下文(BFC的概念及用途)

一、如何创建bfc
    1、float的值不是none。
    2、position的值不是static或者relative。
    3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    4、overflow的值不是visible
    
二、BFC布局规则
    1、内部的Box会在垂直方向，一个接一个地放置。
    2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    3、每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。
            即使存在浮动也是如此。
    4、BFC的区域不会与float box重叠。
    5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    6、计算BFC的高度时，浮动元素也参与计算。

三、BFC的作用
    1.利用BFC避免margin重叠。
        根据布局规则的第二条，比如我俩BFC（都是div或者p标签之类的）。然后他们又是相邻的，
        就会避免其margin重叠，比如我第一个的margin-bottom和第二个的margin-top取大的那一个
        （div1的margin是30px，div2的margin是50px，当他们相邻时，其margin为50px）

    2.两栏自适应布局
        根据布局规则的第三条，和第四条
        比如把左边的部分设为浮动，右边的也设为BFC，左边的设一个宽，右边的不设宽，就可以实现两栏的自适应布局效果
            例如：      .bigbox{
                            width: 100%;
                            height:100%
                        }
                        .box1{
                            width: 200px;
                            height: 300px;
                            float: left;
                            background: rgb(235, 217, 235)
                        }
                        .box2{
                            height: 600px;
                            background: rgb(187, 187, 211);
                            overflow: hidden;
                        }
                        
    3.清除浮动
        根据最后一条布局规则，如若一个父盒子没有设置高度，而父盒子内的多个子盒子又设置了浮动则会发生高度塌陷
        使父盒子显示不完全，这种情况就可以激活父盒子BFC来清除浮动