Html 的BFC 理解

1.什么是BFC
 

 bfc 从字面意思来讲就是block formatting context (块级格式化上下文)，bfc 其实是页面中一个单独渲染区域，并且有自己的渲染规则，bfc 区域里的元素无论如何布局 都不会影响外层的元素排列

2.如何触发BFC

 首先肯定不是所有的元素模式都会产生BFC，可以产生BFC的情况有：

1.display 为block,list-item table,inline-block, table-cell,flex inline-flex都会产生BFC （为inline 时触发 IFC）;

2.float 属性不为none;

3.position 为absolute或者为fixed;

4.overflow 不为visible

3.BFC 元素所具有的特性

1. 在bfc 中盒子从顶端垂直排列 ；

2. 盒子垂直方向的距离 由ma rgin 决定，在同属于一个bfc 时的margin 会发生重叠；

3. 在bfc 中盒子的margin-left 会以 父类盒子的border-left 为起点

4.bfc 的区域 不会与浮动盒子产生交集，而是紧贴浮动边缘

5. 计算bfc 区域高度时，也会检测浮动盒子的高度

4.BFC 的主要作用

1.清除浮动（只要把父元素设置为 bfc 就可以清除子元素的浮动了，一般的用法是给父元素设置overflow:hidden 样式，对于es6 加上zoom :1 就可以了）
 

 .father{
            width: 500px;
            border: 1px solid #000;
        }
        .son1,.son2{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            
        }
        .son2{
        
            background-color: deeppink;
        }




<div class="father">
                    <div class="son1">
                        
                    </div>

                    <div class="son2">

                    </div>
            </div>

正常来讲在没有给子元素设置浮动的时候 两个子盒子是会垂直排列的，而且会把父元素盒子的高度撑开，因为子元素添加了float 所以导致变成了图上所示，那么通常如何解决这种问题呢，那就是给父元素创造一个bfc 区域，比如在
 

 .father{
            width: 500px;
            border: 1px solid #000;
            float: left;/**overflow:auto*/
        }

这样就会解决浮动问题

 

2.解决外边距合并问题

因为在同一个bfc 区域两个相邻的盒子会产生 margin 重叠，所以需要在一个盒子外再套上一个盒子，并且给新建的盒子添加bfc 效果