BFC的理解

前段面试总会考察这么个知识点，就是BFC，我自己也经常懵逼，这是个啥呀，完全不知道，但是呢，其实这就是个简写的概念，名字比较唬人而已，今天，我们就来深入研究下，揭开它的伪装。

 

bfc=> block formating context 块级格式化上下文

这个名字让你很迷惑，是不是，其实用通俗的语言来说的话，就是建立一个与外界毫不相干的盒子，不受外界影响，也不影响外界。

比如，1，我们经常碰到的，两个盒子按顺序从上到下排列，比如A，B，两个都设置的外面局margin:20px;

此时，A,B之间的间隙就不是我们理解的40px，而是依然是20px，这就是css里面的边距重叠，会以较大的边距为准，而不会叠加

2，子元素浮动，父元素高度塌陷，

 

   <div class="father">
      <div class="d3">
      </div>
      <div class="d4"></div>
    </div>

样式：
.father {
        background-color: yellow;
        padding: 10px;
        /* float: left;  */
        /* overflow: scroll; */
        /* display: inline-block; */
        /* position: absolute; */
        display: flex;
        /* 解决盒子高度塌陷的问题，就需要使用到bfc,正好，1,给元素设置浮动就能形成bfc 
        通过别人的总结，主要是6大类情况会形成bfc
        1,overfollow不会visible
        2,浮动元素
        3，绝对定位以及固定定位元素
        4,设置为行内块的元素 也就是inline-block
        5，设置为flex以及grid的元素
        
        
        */
        /* overflow: visible; */
      }
      .d3,d4 {
        padding: 10px;
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }

　　

总结一下，其实在真实的开发中你或多或少都解决过这些问题，只是呢，你没意思到这是bfc的应用，就像现在用的非常多的flex布局，是吧，

一般如果面试中问到的话，可以说下下面产生bfc的几种属性

1，浮动元素

2，绝对定位和固定定位元素

3，overfollow不会visible的元素  这个visible就是默认值

4，行内块元素，也就是inline-block

5，flex以及grid的元素及其子元素。这里补充一句，当设置为flex布局之后，子元素的float、clear和vertical-align属性将失效,这是不是就能解释为啥就能解决塌陷的问题了。

前端深似海，结果还喜欢搞一些概念来迷惑大家，借用一句话来形容就是，你这糟老头子，坏的很。