BFC（Block Formatting Context）块级格式化环境

BFC（Block Formatting Context）块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以作为一个元素开启BFC。
开启BFC的属性会形成一个独立的布局区域。

开启BFC后的特点：
1、开启BFC的元素不会被浮动元素覆盖。
2、开启BFC的子元素和父元素不会产生外边距重叠。
3、开启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.利用BFC避免margin重叠
属于同一个BFC的垂直相邻的两个盒子会发生margin重叠，我们可以设置两个不同的BFC，也就是我们可以把第二个P用div包起来，然后激活它成为一个BFC。

2、自适应两栏布局
left盒子添加浮动后，会压在right盒子上。
我们给right盒子添加overflow:hidden；属性 让right触发BFC属性使其成为一个独立的渲染区域。 此时会形成一个自适应两栏布局。

3、消除外边距重叠
在父子关系的盒子，给子盒子添加margin后会产生外边距重叠，父子盒子都会移动。
此时给父盒子添加overflow:hidden；属性激活BFC可以消除外边距重叠。

4、清除浮动
Clear 作用：清除浮动元素对当前元素产生的影响。
给当前元素添加：clear：both;

5、清除浮动（消除高度塌陷）
①当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。
给父节点激活BFC。（overflow:hidden;）

②after伪类解决高度塌陷
给父级盒子添加代码

 .box::after {
            content: '';
            display: block;
            clear: both;
        }

③clearfix同时解决外边距重叠和高度塌陷问题。（给父级盒子添加）

.clearfix::before,
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }