BFC（块级格式化上下文）

block format context(块级格式化上下文)，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境 html元素在这个环境中按照一定的规则进行布局。

实际上，BFC提供了一个独立的空间，让空间里的子元素不会影响到外面的布局（如下图）

具体实现是为元素设置一些CSS属性，来触发这一空间：

触发规则：

       1. float不为none

       2. position不为relative和static

       3. overflow为auto scroll 和hidden

       4. display的值为table-cell 或inline-block

BFC能解决的问题：

       1. 解决浮动元素令父元素高度坍塌的问题

就像下图，一个父元素包含多个浮动子元素时，父元素高度坍塌，因为浮动的子元素脱离了文档流，被提出来形成新的vip队列，下方普通队列中的元素无法触及它，父元素无法检测子元素的高度，导致后面的布局乱掉

解决方法：

（1）在不影响整体布局的前提下，对父元素做一些设置来触发BFC，以下的四种方法，设置其中一种就可以

    /*overflow: hidden;*/
    /*display: table-cell;*/
    /*position: fixed;*/
    /*position: absolute;*/

触发了BFC的容器就是页面上的一个完全隔离开的容器，容器中的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时不得不让浮动的元素也参与进来，变相地实现了清楚内部浮动的目的。

（2）让父元素也浮动起来，父元素和子元素一起脱离文档流，因此父元素就可以自适应子元素的高度

         优点：代码量少

         缺点：影响之后的元素排列

（3）给父元素设置固定的高度，前提是子元素的高度固定且已知

        优点：没有学习成本

        缺点：不灵活 难以维护

（4）在子元素末尾添加一个空的子元素，用来清除浮动{clear: both}

         优点：容易掌握

         缺点：添加无意义元素，不利于维护

（5）为浮动的最后一个子元素设置伪元素（::after）,为该伪元素设置{clear:both}，但是复用不当会导致代码量增加

        

        2. 解决自适应布局的问题

一般是左边宽度固定，右边宽度自适应变化，通常使用浮动实现,当然还有其它方式实现这样的两栏布局

                                                 

    
    



  
left
  
right

      3. 解决外边距垂直方向重合问题

两个兄弟元素之间的外边距，在垂直方向上会取最大值而不是取和，例如相邻的两个p元素都设置了margin为20px，此时默认两个元素之间的间距为20px而不是40px，解决方法是，可以给其中一个p元素在外面包裹一个父元素，并且触发父元素BFC比如设置为{overflow:hidden}，这样就可以打破原有格局，不会再有重叠